Comment puis-je créer une double bordure pour un élément circulaire ?

Cercle avec doubles bordures

Dans cet article, nous explorons une solution au défi de l'ajout de doubles bordures aux éléments circulaires. Les carrés et les rectangles se prêtent facilement aux doubles bordures, mais appliquer la même technique aux cercles nécessite une approche plus créative.

Considérez le CSS fourni dans l'énoncé du problème, qui génère un div circulaire avec une seule bordure verte :

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  border: 1px solid green;
  background: pink;
}

Notre objectif est de modifier ce CSS pour créer des doubles bordures. La propriété outline a déjà été tentée sans succès, car elle produisait un contour rectangulaire. Les divs imbriqués et les couleurs d'arrière-plan se sont également révélés inefficaces en raison de problèmes d'alignement.

Pour obtenir l'effet souhaité, nous modifions le CSS comme suit :

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}

Ce CSS crée un div avec un blanc uni. bordure et une ombre intérieure rouge. La propriété box-shadow émule la deuxième bordure en projetant un encart coloré à partir du bord du div.

La principale différence entre cette solution et les tentatives précédentes réside dans l'utilisation d'une ombre de boîte au lieu d'une deuxième bordure ou d'un deuxième contour. En utilisant de manière créative l'ombre de la boîte, nous obtenons l'illusion d'une double bordure sans sacrifier la forme circulaire.

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!