Comment puis-je créer des bordures partielles en CSS pour mes boîtes ?

Déclarer des bordures partielles pour les boîtes CSS

Créer une boîte CSS avec une bordure qui apparaît uniquement sur des sections spécifiques peut améliorer l'attrait visuel et fournir une utilité . Bien que CSS n'autorise pas explicitement les bordures partielles, il existe des solutions de contournement efficaces pour obtenir cet effet avec élégance.

Bordure inférieure partielle

Pour une boîte qui affiche uniquement une bordure en bas, appliquez les styles suivants :

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

L'élément div crée la boîte principale, tandis que le pseudo-élément div:after ajoute le bas frontière. Cette technique se dégrade gracieusement et ne nécessite pas de balisage supplémentaire.

Bordures partielles multiples

Pour créer plusieurs bordures partielles sur la même boîte, utilisez la propriété border-image avec une image découpée comme source. Cela vous permet de spécifier la position et les dimensions de chaque segment de bordure :

div {
  width: 350px;
  height: 100px;
  background: url('image.png') no-repeat;
}

div:after {
  content: '';
  width: 350px;
  height: 1px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image: url('image.png') 60px 350px 5px 60px / 1px 1px;
}

En résumé, bien que CSS ne prenne pas en charge nativement les bordures partielles, ces techniques fournissent des solutions efficaces qui se dégradent gracieusement et offrent une flexibilité dans la conception visuelle. traitements de bordure de boîte attrayants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!