Wie kann ich abgerundete Ecken für Innenkästen und Ränder erstellen?

Abgerundete Ecken für innere Boxen und Ränder erzielen

Das Problem verstehen

Das Ziel besteht darin, eine Box mit abgerundeten Ecken und einem Rand zu erstellen, der ebenfalls abgerundet ist hat abgerundete Ränder. Die Eigenschaft „background-clip“ kann verwendet werden, um die abgerundeten Ecken für den Rand zu erreichen. Der Innenkasten bleibt jedoch rechteckig.

Abgerundete Ecken des Innenkastens erreichen

Um die Ecken des Innenkastens abzurunden, kann die Eigenschaft border-radius verwendet werden. Der innere Randradius wird als Differenz zwischen dem äußeren Randradius und der Randbreite berechnet. Daher wird der Innenrandradius zu:

inner border radius = outer border radius - border width

Wenn die Randbreite größer als der Randradius ist, wird der Innenrandradius negativ, was zu umgekehrten Ecken führt. Daher sollte die Randbreite bei der Berechnung des inneren Randradius berücksichtigt werden.

Ändern des Codes

Im bereitgestellten Code beträgt die Randbreite 5 Pixel und der äußere Randradius 10 Pixel. Unter Verwendung der obigen Formel wird der innere Randradius zu:

inner border radius = 10px - 5px = 5px

Das geänderte CSS wird zu:

.radius-all {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.template-bg {
  background: #FFF;
}

.template-border {
  border: 5px solid rgba(255, 255, 255, 0.2);
}

Zusätzliche Überlegungen

• Um abgerundete Ecken zu vermeiden Für den äußeren Rand sollten die Eigenschaften von -vendor-background-clip auf border-box gesetzt sein.
• Farbüberlagerungen können angewendet werden in JavaScript mit Methoden, die hexadezimale Farbcodes in Dezimalwerte umwandeln und die notwendigen Berechnungen durchführen, um die Deckkraft zu verringern.
• Abgerundete Ränder können sowohl auf die innere als auch die äußere Box angewendet werden, indem separate Boxelemente verwendet werden oder indem direkt darauf eine Grenze erstellt wird die innere Box.
• Eine Klasse für abgerundete Ränder kann erstellt werden, um abgerundete Ränder effizient auf mehrere Boxen anzuwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich abgerundete Ecken für Innenkästen und Ränder erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!