Wie kann ich einen doppelten Rahmen für ein kreisförmiges Element erstellen?

Kreis mit doppelten Rändern

In diesem Artikel untersuchen wir eine Lösung für die Herausforderung, kreisförmigen Elementen doppelte Ränder hinzuzufügen. Quadrate und Rechtecke eignen sich leicht für doppelte Ränder, aber die Anwendung derselben Technik auf Kreise erfordert einen kreativeren Ansatz.

Beachten Sie das in der Problemstellung bereitgestellte CSS, das ein kreisförmiges Div mit einem einzelnen grünen Rand generiert:

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  border: 1px solid green;
  background: pink;
}

Unser Ziel ist es, dieses CSS zu ändern, um doppelte Ränder zu erstellen. Die Umrisseigenschaft wurde zuvor erfolglos ausprobiert, da sie einen rechteckigen Umriss erzeugte. Auch verschachtelte Divs und Hintergrundfarben erwiesen sich aufgrund von Ausrichtungsproblemen als unwirksam.

Um den gewünschten Effekt zu erzielen, ändern wir das CSS wie folgt:

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}

Dieses CSS erstellt ein Div mit einem durchgehenden Weiß Rand und ein roter Innenschatten. Die Box-Shadow-Eigenschaft emuliert den zweiten Rand, indem sie einen farbigen Einschub vom Rand des Div projiziert.

Der Hauptunterschied zwischen dieser Lösung und früheren Versuchen liegt in der Verwendung eines Boxschattens anstelle eines zweiten Rands oder Umrisses. Durch den kreativen Einsatz von Kastenschatten erreichen wir die Illusion eines doppelten Randes, ohne auf die Kreisform zu verzichten.

Das obige ist der detaillierte Inhalt vonWie kann ich einen doppelten Rahmen für ein kreisförmiges Element erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!