CSS box-shadow Eigenschaft

Definition und Verwendung

Die Eigenschaft box-shadow fügt einem Rahmen eine oder mehrere Schatten hinzu.

Tipp:Verwenden Sie die border-image-*-Attribute, um schöne anpassungsfähige Knöpfe zu erstellen!

Weitere Informationen:

CSS3-Tutorial:CSS3 Ränder

HTML DOM Referenzhandbuch:boxShadow-Eigenschaft

Beispiel

Fügen Sie box-shadow zum div-Element hinzu:

div
{
box-shadow: 10px 10px 5px #888888;
}

Versuchen Sie es selbst

Am Seitenende gibt es mehr Beispiele.

CSS-Syntax

box-shadow: h-shadow v-shadow blur spread color inset;

Anmerkung:Die Eigenschaft box-shadow fügt einem Rahmen eine oder mehrere Schatten hinzu. Das Attribut besteht aus einer durch Kommas getrennten Liste von Schatten, die aus 2-4 Längenwerten, optionalen Farben und optionalen inset-Schlüsselwörtern definiert werden. Ausgelassene Längenwerte sind 0.

Attributwert

Wert Beschreibung Test
h-shadow Erforderlich. Horizontale Position des Schattens. Negative Werte sind erlaubt. Test
v-shadow Erforderlich. Vertikale Position des Schattens. Negative Werte sind erlaubt. Test
blur Optional. Verwischungsabstand. Test
spread Optional. Schattengröße. Test
color Optional. Schattenfarbe. Siehe CSS-Farbwerte. Test
inset Optional. Ändern Sie den externen Schatten (outset) in einen internen Schatten. Test

Technische Details

Standardwert: keine
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: Objekt.style.boxShadow="10px 10px 5px #888888"

Mehr Beispiele

Bild, das auf den Tisch geworfen wird
Dieses Beispiel zeigt, wie man ein 'Polaroid'-Bild erstellt und das Bild dreht.

Browser-Unterstützung

Die Zahlen in der Tabelle zeigen die erste Browser-Version an, die das Attribut vollständig unterstützt.

Zahlen mit -webkit- oder -moz- sind die erste Version mit Präfixen verwendet.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5