Wie gestaltet man einen responsiven Kreis mit zwei Rändern?

Ansprechendes Gestalten eines Kreises mit zwei Rändern

Um einen Kreis mit zwei Rändern zu gestalten, der sich an die Größe des Behälters anpasst, können Sie den folgenden Ansatz verwenden:

<div></div>

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

Diese Struktur erstellt einen Kreis mit einem durchgehenden weißen Rand und einem roten Innenrand, der durch die Box-Shadow-Eigenschaft dargestellt wird. Der Kastenschatten erzeugt effektiv die Illusion eines zweiten Randes, indem er die Hintergrundfarbe über den Rand des Kreises hinaus erweitert. Dieser Ansatz stellt sicher, dass das Design des Kreises reaktionsfähig bleibt und seine Abmessungen und sein Erscheinungsbild an die Größe des Containers angepasst werden.

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