CSS box-shadow
CSS box-shadow ermöglicht Schattenverläufe
Die Eigenschaft box-shadow ermöglicht die Darstellung von Schattenverläufen für Boxen.
Link zum Originaldokument: Selfhtml bo-shadow
box-shadow
benötigt folgende Angaben:
- eine Längenangabe für die horizontale Verschiebung,
- eine Längenangabe für die vertikale Verschiebung
- eine Farbangabe
Für die Längenangaben sind sowohl negative als auch positive Werte erlaubt, jedoch keine Prozentangaben. Firefox, der Internet Explorer und Opera initialisieren eine fehlende Farbangabe mit der Schriftfarbe des Elementes, welches den Schatten erhalten soll.
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. - 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.
Erlaubt ist zudem die Angabe none
.
Hinweis zum Internet Explorer: Ein table Element mit border-collapse:collapse zeigt keinen box-shadow an.
Beispielwerte:
box-shadow: 10px 20px 30px grey;