CSS text-shadow Eigenschaft
- Vorherige Seite Text-Überlauf
- Nächste Seite text-transform
Definition und Verwendung
Die text-shadow-Eigenschaft legt Schatten auf den Text fest.
Weitere Informationen siehe:
CSS3-Tutorial:CSS3 Texteffekte
HTML DOM Referenzhandbuch:textShadow-Eigenschaft
Beispiel
Grundlegende Textschatten-Effekte:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Am unteren Ende der Seite gibt es mehr Beispiele.
CSS-Syntax
text-shadow: h-shadow v-shadow blur color;
Anmerkung:Die text-shadow-Eigenschaft fügt einem Text eine oder mehrere Schatten hinzu. Diese Eigenschaft ist eine durch Kommas getrennte Liste von Schatten, die aus zwei oder drei Längenwerten und einer optionalen Farbvalue definiert werden. Ausgelassene Längen 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. Entfernung der Verwischung. | Test |
| color | Optional. Farbe der Schatten. Siehe CSS-Farbwerte. | Test |
Technische Details
| Standardwert: | keine |
|---|---|
| Vererbbarkeit: | ja |
| Version: | CSS3 |
| JavaScript-Syntax: | object.style.textShadow="2px 2px #ff0000" |
Mehr Beispiele
- Textschatten mit einem verschwommenen Effekt
- Dieses Beispiel zeigt Textschatten mit einem verschwommenen Effekt.
- Textschatten auf weißem Text
- Dieses Beispiel zeigt Textschatten auf weißem Text.
- Textschatten mit Neon-Effekt
- Dieses Beispiel zeigt Textschatten mit Neon-Effekt.
Browser-Unterstützung
Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die die Eigenschaft vollständig unterstützt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
- Vorherige Seite Text-Überlauf
- Nächste Seite text-transform
