CSS text-shadow- Eigenschaft
Beispiel
Grundlegender Textschatten:
h1
{
text-shadow: 2px 2px #ff0000;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die text-shadow
Eigenschaft fügt Text Schatten hinzu.
Diese Eigenschaft akzeptiert eine durch Kommas getrennte Liste von Schatten, die auf den Text angewendet werden sollen.
Standardwert: | keiner |
---|---|
Vererbt: | ja |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.textShadow="2px 5px 5px rot" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
CSS-Syntax
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Hinweis: Um dem Text mehr als einen Schatten hinzuzufügen, fügen Sie eine durch Kommas getrennte Liste von Schatten hinzu.
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
h-shadow | Required. The position of the horizontal shadow. Negative values are allowed | |
v-shadow | Required. The position of the vertical shadow. Negative values are allowed | |
blur-radius | Optional. The blur radius. Default value is 0 | |
color | Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values | |
none | Default value. No shadow | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Tipp: Lesen Sie mehr über zulässige Werte (CSS-Längeneinheiten)
Mehr Beispiele
Beispiel
Textschatten mit Unschärfeeffekt:
h1 {
text-shadow: 2px 2px 8px #FF0000;
}
Beispiel
Textschatten auf weißem Text:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Beispiel
Textschatten mit rotem Neonlicht:
h1 {
text-shadow: 0 0 3px #FF0000;
}
Beispiel
Textschatten mit rotem und blauem Neonlicht:
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Verwandte Seiten
CSS-Tutorial: CSS-Textschatten
HTML-DOM-Referenz: textShadow-Eigenschaft