Cette propriété accepte une liste de valeurs séparées par des virgules afin d'appliquer des effets d'ombre au texte ou à un élément de texte.
Les effets d'ombre sont appliqués dans l'ordre spécifié et peuvent donc revêtir l'un et l'autre, mais sans jamais recouvrir le texte lui-même.
Les effets d'ombre ne changent pas la dimension d'un élément de texte, mais peut l'étendre au-delà ses limites. Une compensation de l'ombre est spécifiée avec deux dimensions qui indiquent la distance du texte.
La première valeur de la longueur détermine la distance horizontale à la droite du texte. Une valeur négative de la longueur horizontale place l'ombre à gauche du texte.
La deuxième valeur de la longueur spécifie la distance verticale en-dessous du texte. Une valeur négative de la longueur verticale place l'ombre au-dessus du texte.
| text-shadows | |
|---|---|
| Valeur | none {Couleur Taille_à_droite Taille_en_bas rayon, Couleur Taille_à_droite Taille_en_bas rayon} |
| Valeur par défaut | aucune |
| Domaine d'application | Tous les éléments |
| Héritage | non |
| Media | visuel |
| Valeur possible |
Action | Exemple |
|---|---|---|
h1 {text-shadow:
Taille_à_droite
Taille_en_bas} |
L'ombre du texte se trouve à droite et en-bas de l'élément de texte. | h1 {text-shadow: 0.2em 0.2em} |
h2 {text-shadow:
Taille_à-droite
Taille_en_bas
Rayon Couleur} |
L'ombre du texte se trouve à droite et en bas de l'élément de texte, de plus un rayon de 5 pixels est spécifié ainsi qu'une couleur rouge. | h2 {text-shadow: 3px 3px 5px red} |
h3 {text-shadow:
Taille_à_droite
Taille_en_bas Rayon
Couleur,
Couleur2
Taille_à_gauche
Taille_en_bas
Rayon,
Taille_à_droite
Taille_au_dessus} |
Spécification d'une liste d'effets d'ombre : Première ombre à droite et sous l'élément de texte et de couleur rouge, Seconde ombre à gauche et à et en bas avec une couleur jaune flou, Troisième ombre à droite et au-dessus du texte et sans couleur |
h3 {text-shadow: 3px 3px 3px red, yellow -3px -3px 2px, 3px -3px} |
A Moscou, la Douma,
<h2 style="text-shadows: 5px 5px 4px">
...
</h2>
<p>
<h3 style="text-shadows: 3px 3px 3px navy">
...
</h3>
<h3 style="text-shadows: 3px 3px 3px yellow,
-3px -3px 3px red,
3px -3px 3px lime">
...
</h3>
<h4 style="text-shadows: 0.8em 0.6em 0.5em green">
...
</h4>
<h4 style="text-shadows: -3mm -3mm 3mm purple">
...
</h4>
...
</p>
| Windows | Macintosh | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| NE4 | NE6 | NE7 | IE5 | IE55 | IE6 | OP5 | OP6 | OP7 | NE4 | NE6 | NE7 | IE4 | IE5 |