Wie erstelle ich mithilfe von CSS einen Kreis mit zwei unterschiedlichen Rändern?-CSS-Tutorial-php.cn

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

Mary-Kate Olsen

Freigeben： 2024-11-02 01:38:30

Original

837 Leute haben es durchsucht

How to Create a Circle with Two Distinct Borders Responsively Using CSS?

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!