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
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
-
background
Kurzschreibweise background-position-x
background-position-y
border-bottom-color
border-bottom-style
border-bottom-width
-
border-bottom
Kurzschreibweise border-left-color
border-left-style
border-left-width
-
border-left
Kurzschreibweise border-right-color
border-right-style
border-right-width
-
border-right
Kurzschreibweise border-top-color
border-top-style
border-top-width
-
border-top
Kurzschreibweise -
border-color
Kurzschreibweise -
border-style
Kurzschreibweise -
border-width
Kurzschreibweise -
border
Kurzschreibweise border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
-
border-radius
Kurzschreibweise border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
-
border-image
Kurzschreibweise box-shadow
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
<line-style>
Enumerierter Typ
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
-
border-block-end-color
Eigenschaft -
border-block-start-color
Eigenschaft -
border-inline-end-color
Eigenschaft -
border-inline-start-color
Eigenschaft -
border-block-end-style
Eigenschaft -
border-block-start-style
Eigenschaft -
border-inline-end-style
Eigenschaft -
border-inline-start-style
Eigenschaft -
border-block-end-width
Eigenschaft -
border-block-start-width
Eigenschaft -
border-inline-end-width
Eigenschaft -
border-inline-start-width
Eigenschaft -
border-start-start-radius
Eigenschaft -
border-start-end-radius
Eigenschaft -
border-end-start-radius
Eigenschaft -
border-end-end-radius
Eigenschaft -
box-sizing
Eigenschaft -
box-decoration-break
Eigenschaft -
text-shadow
Eigenschaft -
<url>
CSS-Typ -
<color>
Datentyp -
<image>
Datentyp -
<position>
Datentyp -
currentcolor
Schlüsselwort
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 |
CSS Backgrounds Module Level 4 |
Siehe auch
- Interaktive Werkzeuge, mit denen Sie visuell Rahmenbilder, abgerundete Ecken und Schatten erstellen können:
- Anwenden von Farben auf HTML-Elemente mit CSS, einschließlich für Rahmen.
- Die
drop-shadow()
Filterfunktion, die einen Schlagschatteneffekt auf das Eingabebild anwendet. Die Funktion wird von denfilter
- undbackdrop-filter
-Eigenschaften verwendet.