Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété text-shadow ajoute ombre au texte.
Cette propriété accepte une liste d'ombres séparées par des virgules à appliquer au texte.
| Valeur par défaut: | none |
|---|---|
| Hérité: | yes |
| Animable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.textShadow="2px 5px 5px red" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
Syntaxe CSS
text-shadow:h-shadow v-shadow blur-radius color|none|initial|inherit;Note: Pour ajouter plus d'une ombre au texte, ajouter une liste d'ombres séparées par des virgules.
propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| h-shadow | Champs obligatoires. La position de l'ombre horizontale. Les valeurs négatives sont autorisées | Joue-le " |
| v-shadow | Champs obligatoires. La position de l'ombre verticale. Les valeurs négatives sont autorisées | Joue-le " |
| blur-radius | Optionnel. Le rayon de flou. La valeur par défaut est 0 | Joue-le " |
| color | Optionnel. La couleur de l'ombre. Regardez couleur CSS valeurs pour une liste complète des valeurs possibles de couleurs | Joue-le " |
| none | Valeur par défaut. Pas d'ombre | Joue-le " |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | Joue-le " |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Autres exemples
Exemple
Cet exemple démontre un texte-ombre avec un effet de flou:
h1 {
text-shadow: 2px 2px 8px #FF0000;
} Essayez - le vous - même » Exemple
Cet exemple montre text-shadow sur un texte blanc:
h1 {
color: white;
text-shadow:
2px 2px 4px #000000;
} Essayez - le vous - même » Exemple
Cet exemple montre text-shadow avec une lueur au néon rouge:
h1 {
text-shadow: 0 0 3px #FF0000;
} Essayez - le vous - même » Exemple
Cet exemple montre text-shadow avec une lueur au néon rouge et bleu:
h1 {
text-shadow: 0 0 3px #FF0000,
0 0 5px #0000FF;
} Essayez - le vous - même » Pages associées
CSS3 tutoriel: Effets CSS3 Text
Référence HTML DOM: textShadow property