box-shadow

Übersicht

Die box-shadow CSS Eigenschaft beschreibt einen oder mehrere Schatteneffekte als eine kommaseparierte Liste. Sie erlaubt es, den Rahmen fast jeden 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.

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 inset Schlüsselworts ä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. 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 Liste 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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
wobei 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Livebeispiele

• box-shadow Test
• box-shadow Tutorial und 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

Browser Kompatibilität

[1] Schatten beeinflussen das Layout in älteren Gecko, Presto und WebKit Versionen; z. B. falls ein äußerer Schatten mit einer width von 100% auf eine Box fällt, wird eine Scrollleiste angezeigt.

[2] Seit Version 5.5 unterstützt Internet Explorer Microsofts DropShadow und Shadow Filter. Diese proprietären Erweiterungen können dazu verwendet werden, einen Schlagschatten zu werfen (jedoch unterscheiden sich Syntax und Effekt von CSS3). Um box-shadow in IE9 oder später zu erhalten, muss border-collapse auf separate gesetzt werden.

[3] Gecko 13 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10) hat die Unterstützung für -moz-box-shadow entfernt. Seitdem wird nur die Version ohne Präfix unterstützt. Schatten beeinflussen das Layout in älteren Gecko, Presto und WebKit Versionen; z. B. falls ein äußerer Schatten mit einer width von 100% auf eine Box fällt, wird eine Scrollleiste angezeigt.