Wie erstelle ich mit CSS einen Kreis mit zwei Rändern?

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 bereitgestellte ursprüngliche 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 Randes angibt.

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

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

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

<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>

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen Kreis mit zwei Rändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!