Wie erstelle ich abgerundete Ecken sowohl für die Innenseite als auch für den Rand einer Box?

Abgerundete Ecken für die Innenseite einer Box und ihren Rand erstellen

Im Webdesign das Hinzufügen abgerundeter Ecken sowohl an der Innenseite einer Box als auch an deren Rand Sein Rand kann die optische Attraktivität eines Elements verbessern.

Berechnung des inneren Randradius

Um abgerundete Ecken für die innere Box zu erstellen, bestimmen Sie den inneren Randradius. Er wird als Differenz zwischen dem äußeren Randradius und der Randbreite berechnet:

inner_border_radius = outer_border_radius - border_width

Wenn beispielsweise der äußere Randradius 10 Pixel und die Randbreite 5 Pixel beträgt, wäre der innere Randradius 5 Pixel.

CSS-Eigenschaften anpassen

Im bereitgestellten CSS-Code können Sie die herstellerspezifischen Hintergrundclip-Eigenschaften (-moz-background-clip und -webkit-background) entfernen -clip) oder setzen Sie sie auf border-box, um den inneren Randradius zu erreichen. Aktualisieren Sie außerdem den inneren Randradius mithilfe der oben genannten Berechnung.

Code-Snippet:

.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:

• Wenn die Rahmenbreite breiter als der äußere Rahmenradius ist, wird der innere Rahmenradius negativ, was zu umgekehrten Ecken führt.
• Sie können abgerundete Ränder auf einzelne Felder anwenden oder eine CSS-Klasse erstellen Erleichtern Sie die Anwendung auf mehrere Elemente.
• JavaScript kann verwendet werden, um der Kopfzeile Farbüberlagerungen hinzuzufügen und die Hintergrundfarbe des Textkörpers aus Gründen der Konsistenz einfach im Hexadezimalformat zu erhalten.

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