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.
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