CSS/Eigenschaften/box-shadow

Die Eigenschaft box-shadow ermöglicht die Darstellung von Schattenverläufen für Boxen.

Erlaubte Werte

benötigt folgende Angaben:

• eine Längenangabe für die horizontale Verschiebung,
• eine Längenangabe für die vertikale Verschiebung

Optional sind folgende Angaben:

• eine dritte Längenangabe (blur): (Weichzeicheneffekt) Null entspricht einer scharfen Darstellung. Je größer der Wert, umso „verwaschener“ erscheint der Schatten.
• eine vierte Längenangabe (spread): (Maß für eine zusätzliche Vergrößerung des Schattens). Null bedeutet hier, dass der Schatten die Abmessungen „seines“ Elementes hat. Für den Ausbreitungsradius sind auch negative Werte möglich. Prozentangaben sind nicht erlaubt.
• eine Farbangabe, wird keine gesetzt, wird die aktuelle Schriftfarbe verwendet.
• das Schlüsselwort inset gibt an, dass der Schatten ins Innere der Box geworfen wird. Dies darf nur als erste oder letzte Angabe gesetzt werden.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja, als Schatten

Beispiel

verschiedene Bespiele mit box-shadow ansehen …

#one {
	box-shadow: 10px 10px 10px 15px grey;
}

#two {
	box-shadow: 10px 0 10px grey inset;
}

#three {
	box-shadow: -10px -10px 10px lightgrey inset, 10px 10px grey;
}

#three {
  border: thin solid grey;
  border-radius: 0.3em;
  box-shadow: 10px 10px 10px white inset, 10px 10px 10px grey;
}

#four {
	border-radius: 1.5em;
	border: 0.5em solid red;
	box-shadow: 0 0 0 1em red inset;
	padding: 1em;
}

#five {
	box-shadow: 2em 0 khaki inset, -2em 0 khaki inset, 0 -5px 0 0 red inset
}

Das Beispiel enthält fünf div-Elemente, die unterschiedliche Schatten werfen.

• Box 1 hat einen Versatz von je 10px, einen Blur von 10px und einen spread von 15px
• Box 2 hat durch das Schlüsselwort inset einen inneliegenden Schatten nur nach rechts ohne einen Versatz auf der y-Achse
• Box 3 hat einen weißen Innenschatten und, durch ein Komma getrennt, einen weiteren Außenschatten nach rechts unten
• Box 4 hat einen abgeschnittenen Rahmen, was sich mit border nicht erreichen lässt. Der border-radius wirkt auf das div, dann wird ein roter Innenschatten von 1em drübergelegt.
• Box 5 hat einen roten Innenschatten, der an beiden Seiten aber durch einen khaki-farbenen Innenschatten verdeckt wird, sodass es zu einer verkürzten Unterstreichung kommt.

Beachten Sie: Bei einer fehlenden Farbangabe wird die Schriftfarbe des Elements (currentColor) verwendet.
box-shadow vergrößert das Element scheinbar. Wenn Sie Rahmen (wie Box 4 im Bsp.) mit box-shadow realisieren, ist dieser Außenbereich nicht anklick- und fokussierbar.
box-shadow zeichnet einen rechteckigen Rahmen um Bilder. Bei PNGs mit transparentem Hintergrund, bzw. bei SVGs kann drop-shadow() den Schatten direkt um das Grafikobjekt legen.

Siehe auch

• CSS/Tutorials/Boxmodell/Rahmen#box-shadow
• Webdesign/Licht und Schatten
• Filter in SVG/Anwendung in CSS
  Vergleich box-shadow vs drop-shadow()

Weblinks

• Spezifikation (W3C): box-shadow
• MDN: box-shadow