Функция drop-shadow

Die Funktion drop-shadow ermöglicht es, einem Hintergrundbild einen Schatten hinzuzufügen.

Syntax

Selektor {
	filter: drop-shadow(x-Versatz, y-Versatz, Unschärferadius, Farbe);
}

Werte

Wert	Beschreibung
x-Versatz	Die horizontale Verschiebung des Schattens relativ zum Hintergrund. Eine positive Zahl bedeutet eine Verschiebung des Schattens nach rechts, eine negative - nach links. Obligatorischer Parameter.
y-Versatz	Die vertikale Verschiebung des Schattens relativ zum Hintergrund. Eine positive Zahl bedeutet eine Verschiebung des Schattens nach unten, eine negative - nach oben. Obligatorischer Parameter.
Unschärferadius	Legt den Unschärferadius des Schattens fest. Je größer der Wert, desto unschärfer wird der Schatten. Optionaler Parameter. Standardmäßig gleich `0`.
Farbe	Die Farbe des Schattens. Optionaler Parameter. Standardmäßig wird die Schattenfarbe auf Schwarz gesetzt.

Beispiel

Lassen Sie uns für unser Bild einen blauen Schatten setzen, ohne Versatz entlang der Achsen, mit einer Unschärfe von 5px:

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

#elem {
	filter: drop-shadow(0 0 5px #035470);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Siehe auch

die Funktion blur,
die den Hintergrund unscharf macht
die Funktion brightness,
die die Helligkeit des Hintergrunds festlegt
die Funktion contrast,
die den Kontrast des Hintergrunds festlegt
die Funktion hue-rotate,
die die Farbgebung des Hintergrunds festlegt
die Funktion invert,
die die Farben des Hintergrunds invertiert
die Funktion opacity,
die die Transparenz des Hintergrunds festlegt
die Funktion sepia,
die den Hintergrund in Sepia umwandelt
die Eigenschaft background,
die eine Kurzform-Eigenschaft für den Hintergrund darstellt
die Eigenschaft background-image,
mit der einem Block ein Hintergrundbild zugewiesen werden kann