Comment créer une superposition de bordure à l'aide de pseudo-éléments ?

Création d'une superposition de bordure

Pour obtenir l'effet de superposition de bordure, comme le montrent les images fournies, vous pouvez utiliser les techniques suivantes :

Utilisation de pseudo-éléments

Pseudo Les éléments, tels que ::before ou ::after, constituent un moyen pratique de créer la superposition de bordure sans ajouter de balisage supplémentaire. Ils permettent un contrôle facile de la position et de la taille :

CSS :

.box-border {
  background: #94C120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

.box-border::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  box-sizing: border-box;
}

HTML :

<div>

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!