Eigenschaft text-shadow

Die Eigenschaft text-shadow legt einen Schatten für den Text fest. Als Wert akzeptiert die Eigenschaft 4 Parameter, die durch Leerzeichen getrennt werden, oder das Schlüsselwort none, das den Schatten komplett aufhebt (dies ist der Standardwert).

Syntax

Selektor {
	text-shadow: Versatz_x Versatz_y Weichzeichnung Farbe;
}

Selektor {
	text-shadow: none;
}

Parameter

Parameter	Beschreibung
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.
Farbe	Legt die Farbe des Schattens in beliebigen Farb-Einheiten fest. Optionaler Parameter. Wenn nicht angegeben - entspricht die Schattenfarbe der Textfarbe.

Die Verschiebungen entlang der Achsen und die Weichzeichnung werden in beliebigen Größeneinheiten angegeben, außer Prozent.

Beispiel

Lassen Sie uns den Schatten nach unten und links verschieben und eine leichte Unschärfe hinzufügen:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 5px 5px 3px black;
}

Beispiel . Scharfer Schatten

Jetzt machen wir den Schatten rot, verschieben ihn nach unten und links, entfernen aber die Unschärfe - der Schatten wird scharf sein:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 10px 10px red;
}

Beispiel . Gleichmäßiger Schatten

Der Schatten ist jetzt nicht verschoben, aber es wurde eine Unschärfe hinzugefügt:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 0px 0px 3px black;
}

Siehe auch

die Eigenschaft box-shadow,
die einen Schatten für den Container festlegt