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

Kreise mit doppelten Rändern reaktionsschnell gestalten

Das Erstellen eines CSS-Kreises ist unkompliziert, wie das bereitgestellte funktionierende CSS zeigt. Um jedoch einen Kreis mit zwei unterschiedlichen Rändern zu erhalten, müssen wir zusätzliche CSS-Techniken anwenden.

Unter Verwendung der bereitgestellten HTML-Struktur, bei der ein einzelnes

Das Element stellt den Kreis dar:

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

Wir können das CSS wie folgt ändern, um einen Kreis mit zwei Rändern zu erstellen:

<code class="css">div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}</code>

Dieses CSS fügt mithilfe der Box-Shadow-Eigenschaft einen zweiten Rand hinzu , wodurch ein 5 Pixel breiter roter Schatten um den Kreis herum erzeugt wird, wodurch effektiv die Illusion eines zweiten Randes entsteht. Die Farbe des zweiten Rahmens wird durch den Rotwert in der Box-Shadow-Eigenschaft bestimmt.

Das bereitgestellte CSS erzielt den gewünschten Effekt, indem es einen Kreis mit zwei unterschiedlichen Rändern erstellt, der fließend auf Änderungen in der Containergröße reagiert.

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

css html using Property this border

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn