Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà text-shadow aggiunge un'ombra al testo.
Questa struttura accetta un elenco separato da virgole di ombre da applicare al testo.
| Valore di default: | none |
|---|---|
| Inherited: | yes |
| animatable: | yes. Read about animatable Try it |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.textShadow="2px 5px 5px red" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
CSS Sintassi
text-shadow:h-shadow v-shadow blur-radius color|none|initial|inherit;Note: Per aggiungere più di un ombra per il testo, aggiungere un elenco separato da virgole di ombre.
I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| h-shadow | Necessario. La posizione dell'ombra orizzontale. I valori negativi sono consentiti | Gioca " |
| v-shadow | Necessario. La posizione dell'ombra verticale. I valori negativi sono consentiti | Gioca " |
| blur-radius | Opzionale. Il raggio sfocatura. Il valore di default è 0 | Gioca " |
| color | Opzionale. Il colore dell'ombra. Guardate i valori di colore CSS per un elenco completo dei possibili valori di colore | Gioca " |
| none | Valore di default. Nessun ombra | Gioca " |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | Gioca " |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Esempio
Questo esempio dimostra un text-shadow, con un effetto di sfocatura:
h1 {
text-shadow: 2px 2px 8px #FF0000;
} Prova tu stesso " Esempio
Questo esempio dimostra text-shadow su un testo bianco:
h1 {
color: white;
text-shadow:
2px 2px 4px #000000;
} Prova tu stesso " Esempio
Questo esempio dimostra text-shadow con un neon bagliore rosso:
h1 {
text-shadow: 0 0 3px #FF0000;
} Prova tu stesso " Esempio
Questo esempio dimostra text-shadow con un neon rosso e blu bagliore:
h1 {
text-shadow: 0 0 3px #FF0000,
0 0 5px #0000FF;
} Prova tu stesso " Pagine correlate
CSS3 tutorial: Effetti CSS3 Text
Di riferimento HTML DOM: textShadow property