Maison  >  Article  >  interface Web  >  Comment créer une superposition de bordure pour une division enfant avec des pseudo-éléments ?

Comment créer une superposition de bordure pour une division enfant avec des pseudo-éléments ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-20 18:15:16361parcourir

How to Create a Border Overlay for a Child Div with Pseudo Elements?

Création d'un div enfant de superposition de bordure

Pour créer un effet de superposition de bordure pour un div enfant, vous pouvez envisager d'utiliser des pseudo-éléments. Cette approche offre plusieurs avantages :

  • Évite le besoin de balisage supplémentaire.
  • Améliore le contrôle sur la position et la taille de la frontière.

Exemple de mise en œuvre :

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;
}
<div class="button">
  some text
</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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn