Wie erstelle ich in CSS abgerundete Ecken sowohl für die innere Box als auch für ihren Rand?

So erzielen Sie abgerundete Ecken sowohl für die innere Box als auch für ihren Rand

In CSS können abgerundete Ecken mithilfe des Rahmenradius angewendet werden Eigenschaft, die einen Wert in Pixeln oder Prozentsätzen akzeptiert. Wenn Sie diese Eigenschaft jedoch verwenden, um abgerundete Ecken sowohl für einen inneren Kasten als auch für seinen Rand zu erstellen, müssen Sie die Auswirkung der Breite des Rahmens berücksichtigen.

Berechnung des inneren Randradius

Um den inneren Randradius zu berechnen, subtrahieren Sie die Randbreite vom äußeren Randradius. Dadurch wird sichergestellt, dass die inneren Ecken der Box die gewünschte Rundheit aufweisen, während der Rand sein abgerundetes Aussehen behält.

Wenn Sie beispielsweise einen äußeren Randradius von 6 Pixel und eine Randbreite von 5 Pixel wünschen, ist der innere Randradius sollte lauten:

inner border radius = 6px - 5px = 1px

CSS-Code anpassen

Im bereitgestellten Code wird die Folgende Änderungen sollten vorgenommen werden:

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

Dadurch wird der äußere Randradius auf 6 Pixel angepasst. Die Eigenschaften „background-clip“ sollten entfernt oder auf „border-box“ gesetzt werden, um den inneren Randradius zu berücksichtigen.

.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); }

Ebenen und Ränder

Wenn ein separater Rahmen vorhanden ist Da die Eigenschaft „border-radius“ für den Rand verwendet wird, muss sie sowohl auf den Randrahmen als auch auf den inneren Rahmen angewendet werden. Alternativ besteht ein effizienterer Ansatz darin, die Umrandung innerhalb der inneren Box selbst zu verwalten.

Allgemeine Grenzen

Um abgerundete Ecken konsistent auf mehrere Boxen anzuwenden, sollten Sie die Verwendung von a in Betracht ziehen Klasse wie .rounded-borders erstellen und auf die relevanten Elemente anwenden.

.rounded-borders {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

<div></div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS abgerundete Ecken sowohl für die innere Box als auch für ihren Rand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!