Comment puis-je créer des bordures partielles en CSS ?

Bordures partielles en CSS : une illusion créative

Il peut être souhaitable de créer des boîtes avec des bordures qui n'apparaissent que sur certains côtés ou s'étendent uniquement partiellement sur un bord. Malgré l'absence de support direct en CSS, cet effet peut être obtenu avec élégance grâce à une méthode simple et flexible.

Considérons, par exemple, une boîte de 350 px de largeur avec une bordure inférieure qui ne s'étend que de 60 px à partir de la gauche. Cela peut être répliqué avec le code CSS suivant :

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

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

La magie réside dans le pseudo-élément div:after. Cela crée une boîte vide positionnée absolument au bas de la boîte principale. En ajustant les propriétés de largeur et de bas, nous pouvons contrôler la taille et la position de la bordure partielle.

Cette approche est polyvalente et fonctionne bien dans tous les navigateurs modernes. Il ne nécessite aucun balisage supplémentaire, ce qui conduit à un code propre et maintenable. Il se dégrade également gracieusement dans les navigateurs qui ne prennent pas en charge la position : absolue.

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!