CSS-Hintergründe und -Rahmen

Das Modul CSS backgrounds and borders stellt Eigenschaften bereit, mit denen Sie Hintergründe, Rahmen, abgerundete Ecken und Box-Schatten zu Elementen hinzufügen können.

Sie können verschiedene Arten von Rahmenstilen hinzufügen, einschließlich Rahmen, die aus Bildern beliebigen Bildtyps bestehen, von Rasterbildern bis hin zu CSS-Verläufen. Rahmen können eckig oder abgerundet sein, und es kann ein unterschiedlicher Radius für jede Ecke festgelegt werden. Elemente können abgerundet sein, unabhängig davon, ob sie sichtbare Rahmen haben oder nicht.

Box-Schatten umfassen innere und äußere Schatten, einzelne oder mehrere Schatten sowie durchgehend oder verlaufend zu transparent. Ein äußerer Box-Schatten wirft einen Schatten, als ob der border-box des Elements undurchsichtig wäre. Ein innerer Box-Schatten wirft einen Schatten, als ob alles außerhalb des padding-Randes undurchsichtig wäre. Der Schatten kann durchgehend sein oder eine Ausbreitungsdistanz enthalten, wobei die Schattenfarbe in Transparent übergeht.

Die Eigenschaften dieses Moduls ermöglichen es auch, zu definieren, ob Zellen in einer <table> gemeinsame oder getrennte Rahmen haben sollen.

Hintergründe, Rahmen und Box-Schatten in Aktion

Dieses Beispiel von Rahmen, Hintergründen und Box-Schatten enthält zentrierte Hintergrundbilder, die aus linearen und radialen Verläufen erstellt wurden. Eine Reihe von Box-Schatten lassen den Rahmen "hervortreten". Das linke Element hat ein Bild als Rahmen festgelegt. Das rechte Element hat einen abgerundeten, gepunkteten Rahmen.

Die Hintergrundbilder werden mit background-image definiert. Die Bilder werden mit background-position zentriert. Verschiedene Werte der Eigenschaft background-clip für die mehreren Hintergrundbilder werden verwendet, um die Hintergrundbilder innerhalb der content-box zu halten. Die Hintergrundfarbe wird auf die padding-box zugeschnitten, um zu verhindern, dass die Hintergrundfarbe durch die transparenten Bereiche des border-image und der dotted border sichtbar wird. Die abgerundeten Ecken beim Element rechts werden mit der Eigenschaft border-radius erstellt. Ein einzelnes box-shadow-Deklaration wird verwendet, um alle Schatten, sowohl innen als auch außen, festzulegen.

Klicken Sie oben auf „Play“, um den Code für die Animation im MDN Playground anzuzeigen oder zu bearbeiten.

Referenz

Eigenschaften

Hinweis: Das Modul CSS Backgrounds Module Level 4 führt die Eigenschaften background-position-block, background-position-inline, background-repeat-block, background-repeat-inline, background-repeat-x, background-repeat-y und background-tbd ein. Diese wurden jedoch noch nicht implementiert.

Datentypen

Leitfäden

CSS lernen: Hintergründe und Rahmen

Erklärt, wie dekorative Bilder mit Hilfe von CSS-Hintergrundbildern implementiert werden können.

Verwendung mehrerer Hintergründe

Erklärt, wie Sie einem Element einen oder mehrere Hintergründe hinzufügen können.

Größenanpassung von Hintergrundbildern

Beschreibt, wie die Größe und das Wiederholungsverhalten von Hintergrundbildern geändert werden können.

CSS lernen: das Box-Modell

Erklärt, wie Rahmen zusammen mit anderen Eigenschaften des Box-Modells das CSS-Box-Modell beeinflussen.

Verwendung von CSS-Verläufen

Erklärt, wie CSS-Verlaufs-Hintergrundbilder erstellt werden können.

Verwandte Konzepte

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
CSS Backgrounds Module Level 4

Siehe auch