Comment puis-je créer des bordures de boîte partielles en CSS ?

Bordures partielles de boîte en CSS

En CSS, il n'est pas directement possible de créer une boîte avec une bordure qui ne s'étend que partiellement sur la boîte. Cependant, un effet similaire peut être obtenu avec une solution de contournement intelligente.

Création d'une bordure partielle

Cette technique consiste à créer un div conteneur avec les dimensions et la couleur d'arrière-plan souhaitées. Au sein de ce div, un pseudo-élément plus petit est placé à l'aide du sélecteur :after. Ce pseudo-élément représente la bordure partielle et est positionné et dimensionné en conséquence.

Par exemple, pour créer une boîte de 350 px de large avec une bordure de 60 px de large en bas, vous pouvez utiliser le 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;
}

Cette approche offre une flexibilité en termes de taille, de position et de couleur de la bordure. Il garantit également une dégradation gracieuse si le pseudo-élément n'est pas pris en charge par le navigateur, en affichant une simple boîte sans bordure partielle.

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!