Comment créer un effet de bordure de superposition à l'aide de pseudo-éléments CSS ?

Superposition de bordures sur des divisions enfants avec CSS

Dans le domaine de la conception Web, créer un équilibre visuel et de la profondeur est crucial. Une technique efficace consiste à superposer des bordures sur les divs enfants, transformant des éléments simples en composants visuellement attrayants.

Dans ce cas, nous visons à imiter l'esthétique montrée dans les images : une bordure élégamment superposée sur le contenu, créant un subtil mais un effet percutant. Bien que la tentative initiale d'utilisation de z-index se soit avérée infructueuse, il existe une solution plus efficace utilisant des pseudo-éléments CSS.

Présentation du pseudo-élément CSS :before ! Cet outil puissant vous permet de créer un élément virtuel au sein d'un élément existant, sans avoir besoin de balisage HTML supplémentaire. En positionnant et en stylisant :before, nous pouvons facilement obtenir l'effet de superposition de bordure souhaité.

Considérez le code suivant :

body {
  background:grey;
}

.button {
  background: #94c120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

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

En employant :before en tant que pseudo-élément au sein de la classe .button, nous pouvons créer une bordure transparente qui recouvre sans effort le contenu. Cette technique offre un contrôle exceptionnel sur la position et la taille de la bordure, permettant une personnalisation précise.

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!