Wie erreicht man mit CSS abgerundete Ecken sowohl für die Innen- als auch für die Außenseite einer Box?

Abgerundete Ecken sowohl für die Innenseite einer Schachtel als auch für ihren Rand erzielen

Hintergrund

Das Erstellen abgerundeter Ecken sowohl an der Innen- als auch an der Außenseite einer Box kann die optische Attraktivität eines Designs verbessern. Allerdings kann es schwierig sein, diesen Effekt zu erzielen, ohne die Grenzen beider Elemente zu beeinträchtigen. In diesem Leitfaden erfahren Sie, wie Sie diesen gewünschten Effekt mithilfe von CSS erzielen.

Berechnungen des Innenrahmens

Um abgerundete Ecken auf die Innenbox anzuwenden, müssen Sie den Innenrandradius berechnen . Dies erfolgt durch Subtrahieren der Randbreite vom äußeren Randradius.

• Innerer Randradius = Äußerer Randradius - Randbreite

Hier Fall mit einem äußeren Randradius von 6 Pixel und einer Randbreite von 5 Pixel:

• Inner Border Radius = 6px - 5px = 1px

Aktualisiertes CSS:

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

Allgemeine Grenzen anwenden

Wenn Sie Wenn Sie separate Boxen für den Rand und den inneren Inhalt verwenden, wenden Sie die Eigenschaft „border-radius“ und ihre herstellerspezifischen Versionen auf beide Boxen an, um eine konsistente Rundung zu erzielen Ecken.

Beispiel (separate Boxen):

<div>

Beispiel (einzelne Box):

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

<div>

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS abgerundete Ecken sowohl für die Innen- als auch für die Außenseite einer Box?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!