Wie erstelle ich abgerundete Ecken sowohl für die Innen- als auch für die Außenseite einer Box mit Rand?

Wie man runde Ecken sowohl innerhalb als auch außerhalb einer Box und ihres Randes erstellt

Ihre Frage verdeutlicht die Herausforderung, abgerundete Ecken zu erzielen sowohl die innere Box als auch deren Rand. Um dieses Problem anzugehen, befassen wir uns mit den technischen Aspekten von CSS und JavaScript.

Berechnungen des Innenrahmens

Um abgerundete Ecken für die Innenbox zu aktivieren, werden Sie Folgendes tun Sie müssen die Eigenschaft „background-clip“ auf „border-box“ anpassen, was die Standardeinstellung ist.

Zusätzlich wird der innere Randradius durch Subtrahieren von berechnet Randbreite vom äußeren Randradius. Wenn die Randbreite größer als der Randradius ist, wird der innere Randradius negativ, was zu unangenehmen Ecken führt. Daher müssen Sie den inneren Randradius manuell berechnen.

In Ihrem Fall wäre der innere Randradius:

6px - 5px = 1px

Anwenden von Randradien

Mit dem berechneten inneren Randradius können Sie Ihren aktualisieren CSS:

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

Farbüberlagerungen mit JavaScript hinzufügen

Um eine Farbüberlagerung auf die Kopfzeile anzuwenden, können Sie JavaScript verwenden:

// Get the background color of the body element
var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;

// Convert hexadecimal color to RGB (subject to implementation)

// Create a new element for the header
var header = document.createElement('header');

// Set the background color of the header
header.style.backgroundColor = bodyBgColor;

Allgemeine Randanwendung

Wenn Sie ein separates Feld für den Rand verwenden, bewerben Sie sich border-radius sowohl für den Rand als auch für die inneren Boxen. Alternativ können Sie die innere Box so einstellen, dass sie ihren eigenen Rand verwaltet, wodurch der Code vereinfacht wird.

Durch die Anwendung dieser Techniken können Sie abgerundete Ecken sowohl für die innere Box als auch für ihren Rand erzielen.

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