Eigenschaft box-shadow

Die Eigenschaft box-shadow legt einen Schatten für ein Blockelement fest. Als Wert akzeptiert die Eigenschaft 6 Parameter, durch Leerzeichen getrennt, oder das Schlüsselwort none, das den Schatten komplett entfernt.

Syntax

Selektor {
	box-shadow: inset Versatz_x Versatz_y Weichzeichnung Größe_Schatten Farbe;
}

Selektor {
	box-shadow: none;
}

Parameter

Parameter	Beschreibung
`inset`	Optionaler Parameter. Wenn angegeben, wird der Schatten innerhalb des Containers platziert, andernfalls außerhalb.
Versatz x	Legt die Verschiebung des Schattens entlang der X-Achse fest. Ein positiver Wert verschiebt nach rechts, ein negativer nach links.
Versatz y	Legt die Verschiebung des Schattens entlang der Y-Achse fest. Ein positiver Wert verschiebt nach unten, ein negativer nach oben.
Weichzeichnung	Legt die Unschärfe des Schattens fest. Je größer der Wert, desto unschärfer wird der Schatten. Optionaler Parameter. Wenn nicht angegeben, ist der Schatten scharf.
Größe des Schattens	Legt die Größe des Schattens fest. Ein positiver Wert dehnt den Schatten aus, ein negativer Wert staucht ihn hingegen zusammen. Optionaler Parameter. Wenn nicht angegeben, hat der Schatten dieselbe Größe wie das Element.
Farbe	Legt die Farbe des Schattens in beliebigen FarbEinheiten fest. Optionaler Parameter. Wenn nicht angegeben, entspricht die Schattenfarbe der Textfarbe.

Die Versätze entlang der Achsen, die Weichzeichnung und die Größe des Schattens werden in beliebigen Größeneinheiten angegeben, außer Prozent.

Beispiel

In diesem Beispiel ist der Schatten nach unten und rechts verschoben und es wurde eine leichte Unschärfe hinzugefügt:

<div id="elem"></div>

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Beispiel . Scharfer Schatten

In diesem Beispiel ist der Schatten nach unten und rechts verschoben, es gibt jedoch keine Unschärfe (der Schatten ist scharf):

<div id="elem"></div>

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Beispiel . Gleichmäßiger Schatten

In diesem Beispiel ist der Schatten nicht verschoben, aber es wurde eine Unschärfe hinzugefügt:

<div id="elem"></div>

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Beispiel . Größe des Schattens

In diesem Beispiel ist der Schatten nicht verschoben, die Unschärfe ist null, aber es wurde eine Größe hinzugefügt (Schwarz ist der Rand, Rot ist der Schatten):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

Beispiel . Unschärfe + Größe des Schattens

In diesem Beispiel ist der Schatten nicht verschoben, aber es wurden Unschärfe und Größe hinzugefügt (Schwarz ist der Rand, Rot ist der Schatten):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Beispiel . Innerer Schatten

In diesem Beispiel befindet sich der Schatten innerhalb des Containers:

<div id="elem"></div>

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Siehe auch

die Eigenschaft text-shadow,
die einen Schatten für Text festlegt