box-shadow

├ťbersicht

Die CSS-Eigenschaft box-shadow beschreibt einen oder mehrere Schatteneffekte als eine kommaseparierte Liste. Sie erlaubt es, den Rahmen fast jedes Elements einen Schatten werfen zu lassen. Falls ein border-radius f├╝r das Element mit einem Schlagschatten angegeben ist, ├╝bernimmt der Schatten diese abgerundeten Ecken. Die z-Anordnung mehrerer Schlagschatten ist die gleiche wie bei mehreren Textschatten (der zuerst angegebene Schatten ist der oberste).

Box-shadow-Generator ist ein interaktives Werkzeug, das es erlaubt, einen Schlagschatten zu generieren.

Initialwertnone
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter (en-US).
VererbtNein
Berechneter WertL├Ąngen absolut gemacht; angegebene Farben berechnet; ansonsten wie angegeben
Animationstypeine Liste von Schatten

Syntax

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Beliebige Anzahl an Schatten, durch Kommas getrennt */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

Werte

inset
Falls nicht angegeben (Standardwert), wird angenommen, dass der Schatten ein Schlagschatten ist (als ob die Box ├╝ber dem Inhalt schweben w├╝rde).
Die Angabe des Schl├╝sselworts inset ├Ąndert den Schatten so, dass er innerhalb des Rahmens angezeigt wird (als ob der Inhalt innerhalb der Box nach innen gedr├╝ckt w├Ąre). Innere Schatten werden innerhalb des Randes (sogar transparenten) gezeichnet, ├╝ber dem Hintergrund aber unterhalb des Inhalts.
<offset-x> <offset-y>
Diese zwei <length>-Werte setzen den Schattenabstand. <offset-x> beschreibt die horizontale Distanz. Negative Werte platzieren den Schatten links des Elements. <offset-y> beschreibt die vertikale Distanz. Negative Werte platzieren den Schatten oberhalb des Elements. Siehe <length> f├╝r m├Âgliche Einheiten.
Falls beide Werte 0 sind, wird der Schatten hinter dem Element platziert (und k├Ânnen einen Unsch├Ąrfeeffekt erzeugen, falls <blur-radius> und/oder <spread-radius> gesetzt sind).
<blur-radius>
Dies ist ein dritter <length>-Wert. Je gr├Â├čer dieser Wert ist, desto gr├Â├čer ist die Unsch├Ąrfe, sodass der Schatten gr├Â├čer und schw├Ącher wird. Negative Werte sind nicht erlaubt. Falls nicht angegeben, ist der Wert 0 (der Rand des Schattens wird scharf dargestellt).
<spread-radius>
Dies ist ein vierter <length>-Wert. Positive Werte erweitern den Schatten und machen ihn gr├Â├čer, negative Werte verkleinern den Schatten. Falls nicht angegeben, ist der Wert 0 (der Schatten hat die gleiche Gr├Â├če wie das Element).
<color>
Siehe <color>-Werte f├╝r m├Âgliche Schl├╝sselw├Ârter und Notationen.
Falls nicht angegeben, h├Ąngt die Farbe vom Browser ab ÔÇô sie ist normalerweise der Wert der color-Eigenschaft, aber Safari zeichnet in diesem Fall aktuell einen transparenten Schatten.

Interpolation

Jeder Schatten innerhalb der Liste (none wird als eine leere Liste interpretiert) wird ├╝ber die Farbkomponente (als Farbe) interpoliert und x-, y-, Unsch├Ąrfe- und (falls zutreffend) Ausbreitungskomponenten (als L├Ąnge). F├╝r jeden Schatten gilt, falls beide angegebenen Schatten inset sind oder nicht, muss der interpolierte Schatten diesbez├╝glich mit den angegebenen Schatten ├╝bereinstimmen. Falls ein Schatten eines beliebigen Paares von angegebenen Schatten inset ist und der andere nicht, ist die gesamte Schattenliste nicht interpolierbar. Falls die Listen von Schatten verschiedene L├Ąngen haben, wird die k├╝rzere Liste mit Schatten aufgef├╝llt, deren Farbe transparent ist, alle L├Ąngen 0 und dessen inset (oder nicht) mit dem der l├Ąngeren Liste ├╝bereinstimmt.

Formale Syntax

none | <shadow>#

wobei
<shadow> = inset? && <length>{2,4} && <color>?

wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Live-Beispiele

box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow: inset 5em 1em gold;
box-shadow: 0 0 1em gold;
box-shadow: inset 0 0 1em gold;
box-shadow: inset 0 0 1em gold, 0 0 1em red;

Spezifikationen

Spezifikation Status Kommentar
CSS Backgrounds and Borders Module Level 3
Die Definition von 'box-shadow' in dieser Spezifikation.
Anw├Ąrter Empfehlung Urspr├╝ngliche Definition

Browser-Kompatibilit├Ąt

BCD tables only load in the browser