Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Der text-shadow Eigenschaft fügt Schatten Text.
Diese Eigenschaft akzeptiert eine durch Kommata getrennte Liste von Schatten auf den Text angewendet werden.
| Standardwert: | none |
|---|---|
| Vererbt: | yes |
| Anima: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.textShadow="2px 5px 5px red" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| 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;Note: Um mehr als ein Schatten auf den Text hinzufügen, eine durch Kommata getrennte Liste von Schatten hinzufügen.
Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| h-shadow | Erforderlich. Die Position der horizontalen Schatten. Negative Werte sind erlaubt | Spiel es " |
| v-shadow | Erforderlich. Die Position der vertikalen Schatten. Negative Werte sind erlaubt | Spiel es " |
| blur-radius | Optional. Die Unschärfe-Radius. Der Standardwert ist 0 | Spiel es " |
| color | Optional. Die Farbe des Schattens. Schauen Sie sich CSS Farbwerte für eine vollständige Liste der möglichen Farbwerte | Spiel es " |
| none | Standardwert. Kein Schatten | Spiel es " |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | Spiel es " |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Mehr Beispiele
Beispiel
Dieses Beispiel zeigt einen Text-Schatten mit einem Blur-Effekt:
h1 {
text-shadow: 2px 2px 8px #FF0000;
} Versuch es selber " Beispiel
Dieses Beispiel zeigt, Text-Schatten auf einem weißen Text:
h1 {
color: white;
text-shadow:
2px 2px 4px #000000;
} Versuch es selber " Beispiel
Dieses Beispiel zeigt, Text-Schatten mit einem roten Neon-Leuchten:
h1 {
text-shadow: 0 0 3px #FF0000;
} Versuch es selber " Beispiel
Dieses Beispiel zeigt, Text-Schatten mit einem roten und blauen Neon-Leuchten:
h1 {
text-shadow: 0 0 3px #FF0000,
0 0 5px #0000FF;
} Versuch es selber " Verwandte Seiten
CSS3 Tutorial: CSS3 Text Effects
HTML - DOM - Referenz: textShadow property