Comment créer un cercle avec deux bordures en utilisant CSS ?

Comment créer un cercle avec deux bordures

Le style d'un div en un cercle avec deux bordures de manière réactive peut être réalisé avec CSS. Le CSS div du cercle d'origine fourni peut être modifié pour créer l'effet souhaité :

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  background: pink;
  border: 1px solid green;
  box-shadow: 0 0 0 5px red; /* Adds a second red border */
}

Ici, la propriété box-shadow est utilisée pour créer une deuxième bordure autour du cercle. Les valeurs 0 0 0 5px définissent le décalage, le flou et la répartition de l'ombre, tandis que le rouge spécifie la couleur de la bordure.

L'approche div interne mentionnée dans la question peut être implémentée avec un div supplémentaire à l'intérieur du circle div :

<code class="html"><div class="circle">
  <div class="inner"></div>
</div></code>

Le div interne peut être stylisé avec une couleur d'arrière-plan et aligné verticalement à l'aide de flexbox :

<code class="css">div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.inner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: blue;
}</code>

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!