Referenz:CSS/Eigenschaften/box-shadow

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft box-shadow CSS 3.0
Beschreibung 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.
default-Wert

none

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar ja, als Schatten
Browsersupport
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Spezifikation W3c logo klein.gif box-shadow
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

Firefox, der Internet Explorer und Opera initialisieren eine fehlende Farbangabe mit der Schriftfarbe des Elementes, welches den Schatten erhalten soll.

Tipp