Comment puis-je créer des bordures partielles pour des boîtes à l'aide de CSS ?

Création de bordures partielles pour des boîtes en CSS

En CSS, il n'est pas possible de déclarer directement des bordures de boîtes avec des tailles spécifiques ou une couverture partielle. Cependant, il existe une approche alternative qui recrée efficacement cet effet :

Solution :

Créez une bordure CSS régulière pour la boîte et ajoutez un élément enfant positionné avec CSS pour étendre la bordure à la longueur souhaitée. Voici un exemple :

.box {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
  border: 1px solid black;
}

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

HTML :

<div class="box"></div>

Ce code crée une boîte avec une bordure noire régulière et une barre grise supplémentaire de 60 px de long à l'emplacement le bas, simulant efficacement une bordure partielle. Cette technique se dégrade gracieusement dans les anciens navigateurs qui ne prennent pas en charge le positionnement CSS.

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!