So erstellen Sie einen Kreis mit zwei Rändern

Mit CSS lässt sich ein Div responsiv in einen Kreis mit zwei Rändern umwandeln. Das ursprünglich bereitgestellte Circle-Div-CSS kann geändert werden, um den gewünschten Effekt zu erzielen:

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 */
}

Hier wird die Box-Shadow-Eigenschaft verwendet, um einen zweiten Rahmen um den Kreis zu erstellen. Die Werte 0 0 0 5px definieren den Versatz, die Unschärfe und die Ausbreitung des Schattens, während Rot die Farbe des Rahmens angibt.

Der in der Frage erwähnte innere Div-Ansatz kann mit einem zusätzlichen Div innerhalb des implementiert werden Kreis div:

Das innere Div kann mit einer Hintergrundfarbe gestaltet und mithilfe von Flexbox vertikal ausgerichtet werden:

div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

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