CSS/Eigenschaften/box-shadow

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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
  • eine Farbangabe

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.
  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: none
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar ja, als Schatten
Beispiel
#one { 
  box-shadow: 10px 10px 10px 20px #999; 
}
#two   { 
  box-shadow: 10px 0 10px #999 inset; 
}
#three { 
  box-shadow: -10px -10px 10px #ccc inset, 10px 10px #aaa;
}
#four { 
  box-shadow: 0 175px #eed inset, 0 0 0 5px red inset;
}
 
Beachten Sie: Bei einer fehlenden Farbangabe wird die Schriftfarbe des Elements (currentColor) verwendet.

Weblinks

Siehe auch