CSS Hintergründe und Rahmen
Das Modul CSS Hintergründe und Rahmen bietet Eigenschaften zum Hinzufügen von Rahmen, abgerundeten Ecken und Box-Schatten zu Elementen.
Sie können verschiedene Arten von Rahmenstilen hinzufügen, einschließlich Rahmen, die aus Bildern eines beliebigen Bildtyps bestehen, von Rastergrafiken bis hin zu CSS-Verläufen. Rahmen können eckig oder abgerundet sein, und ein unterschiedlicher Radius kann für jede Ecke festgelegt werden. Elemente können abgerundet sein, unabhängig davon, ob sie einen sichtbaren Rahmen haben oder nicht.
Box-Schatten umfassen Innen- und Außenschatten, einzelne oder mehrere Schatten, und können solide sein oder allmählich zu transparent verblassen. Ein äußerer Box-Schatten wirft einen Schatten, als ob die Rahmenbox des Elements undurchsichtig wäre. Ein innerer Box-Schatten wirft einen Schatten, als ob alles außerhalb der Polsterkante undurchsichtig wäre. Der Schatten kann solide sein oder eine Ausbreitungsdistanz beinhalten, bei der die Schattenfarbe zu transparent übergeht.
Die Eigenschaften in diesem Modul ermöglichen es Ihnen auch zu definieren, ob Zellen innerhalb eines <table>
gemeinsame oder separate Rahmen haben sollen.
Hintergründe, Rahmen und Box-Schatten in Aktion
Dieses Beispiel von Rahmen, Hintergründen und Box-Schatten besteht aus zentrierten Hintergrundbildern, die aus linearen und radialen Verläufen bestehen. Eine Serie von Box-Schatten lässt den Rahmen „poppen“. Das Element auf der linken Seite hat ein Rahmenbild gesetzt. Das Element auf der rechten Seite hat einen abgerundeten, gepunkteten Rahmen.
Die Hintergrundbilder werden mit background-image
definiert. Die Bilder werden mit background-position
zentriert. Unterschiedliche Werte der background-clip
-Eigenschaft für die mehreren Hintergrundbilder werden verwendet, um die Hintergrundbilder innerhalb der Inhaltsbox zu halten. Die Hintergrundfarbe wird zur Polsterbox zugeschnitten, um zu verhindern, dass der Hintergrund durch die transparenten Bereiche für das border-image
und den dotted
border
erscheint. Die abgerundeten Ecken im Element auf der rechten Seite werden mit der border-radius
-Eigenschaft erstellt. Eine einzige box-shadow
-Deklaration wird verwendet, um alle Schatten festzulegen, sowohl Innen- als auch Außenschatten.
Um den Code für dieses Beispiel zu sehen, sehen Sie sich den Quellcode auf GitHub an.
Referenz
Eigenschaften
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
-
background
shorthand background-position-x
background-position-y
background-position-inline
background-position-block
border-bottom-color
border-bottom-style
border-bottom-width
-
border-bottom
shorthand border-left-color
border-left-style
border-left-width
-
border-left
shorthand border-right-color
border-right-style
border-right-width
-
border-right
shorthand border-top-color
border-top-style
border-top-width
-
border-top
shorthand -
border-color
shorthand -
border-style
shorthand -
border-width
shorthand -
border
shorthand border-collapse
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
-
border-radius
shorthand border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
-
border-image
shorthand box-shadow
Datentypen
<line-style>
enumerated type
Leitfäden
- CSS lernen: Hintergründe und Rahmen
-
Erklärt, wie dekorative Bilder mit CSS-Hintergrundbildern implementiert werden.
- Verwendung mehrerer Hintergründe
-
Erklärt, wie man ein oder mehrere Hintergründe auf ein Element setzt.
- Hintergrundbilder skalieren
-
Beschreibt, wie Sie die Größe und das Wiederholverhalten von Hintergrundbildern ändern können.
- CSS lernen: das Box-Modell
-
Erklärt, wie Rahmen zusammen mit anderen Box-Modell-Eigenschaften das CSS-Box-Modell beeinflussen.
- Verwendung von CSS-Verläufen
-
Erklärt, wie CSS-Verlaufs-Hintergrundbilder erstellt werden.
Verwandte Konzepte
-
border-block-end-color
property -
border-block-start-color
property -
border-inline-end-color
property -
border-inline-start-color
property -
border-block-end-style
property -
border-block-start-style
property -
border-inline-end-style
property -
border-inline-start-style
property -
border-block-end-width
property -
border-block-start-width
property -
border-inline-end-width
property -
border-inline-start-width
property -
border-start-start-radius
property -
border-start-end-radius
property -
border-end-start-radius
property -
border-end-end-radius
property -
box-sizing
property -
box-decoration-break
property -
text-shadow
property -
<url>
CSS type -
<color>
data type -
<image>
data type -
<position>
data type -
currentcolor
keyword
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 |
Siehe auch
- Interaktive Werkzeuge, mit denen Sie visuell Rahmenbilder, abgerundete Ecken und Box-Schatten erstellen können:
- Farbe auf HTML-Elemente mit CSS anwenden, einschließlich für Rahmen.
- Die
drop-shadow()
Filterfunktion, die einen Schlagschatteneffekt auf das Eingabebild anwendet. Die Funktion wird durch diefilter
undbackdrop-filter
Eigenschaften verwendet.