English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo text-shadow CSS applica uno o più effetti di ombra al contenuto del testo dell'elemento. Ogni effetto di ombra deve specificare l'offset dell'ombra e può scegliere di specificare il raggio di sfocatura e il colore dell'ombra.
La tabella seguente fornisce una descrizione dell'uso e la cronologia delle versioni di questo attributo, nonché la sintassi dell'uso di questo attributo nei script JavaScript.
| Valore predefinito: | nessuno |
|---|---|
| Applicabile a: | Tutti gli elementi. È anche applicabile a::first-letter e::first-line. |
| Ereditarietà: | Sì |
| Animabile: | Sì.Riferimento Attributi di animazione. |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | oggetto.style.textShadow="2px 2px #ff0000" |
L'effetto di ombra del testo viene applicato nell'ordine specificato, quindi può sovrapporsi l'uno all'altro, ma non coprire mai il testo stesso.
Puoi specificare il raggio di sfocatura dopo il valore di spostamento dell'ombra; è un valore di lunghezza che rappresenta la dimensione dell'effetto sfocatura.
Puoi specificare il valore del colore dell'ombra prima o dopo la lunghezza di spostamento. Se non viene specificato il colore dell'ombra, verrà utilizzato CSS colorValore dell'attributo.
La sintassi di questo attributo è la seguente:
text-shadow: shadow1[, shadow2, ... shadowN] | none | inherit where shadow is: [offset-x offset-y blur-radius color]
Gli esempi seguenti dimostrano come utilizzare l'attributo text-shadow.
h1 {
text-shadow: 2px 2px 5px #000;
}
p {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}Prova a vedere <br/>Attenzione:Se entrambi i valori di offset dell'ombra sono impostati a 0, l'ombra verrà posizionata dietro il testo e potrebbe verificarsi un effetto sfocatura quando viene specificato il raggio sfocatura.
La tabella sottostante descrive i valori di questo attributo.
| Valore | Descrizione |
|---|---|
| Obbligatorio -È necessario specificare i seguenti valori per l'attributo. | |
| h-shadow | Obbligatorio. Posizione orizzontale dell'ombra. Permette valori negativi. |
| v-shadow | Obbligatorio. Posizione verticale dell'ombra. Permette valori negativi. |
| Opzionale -I seguenti valori sono opzionali. | |
| blur | Specificare la dimensione sfocata. |
| color | Specificare il colore dell'ombra.Valori di colore CSSper ottenere l'elenco possibile dei valori di colore. |
| inherit | Se specificato, l'elemento correlato utilizza il valore dell'attributo text-shadow dell'elemento padre. |
Compatibilità del browser per l'attributo text-shadow, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta l'attributo; tutti i browser mainstream supportano questo attributo.
|
Attenzione: Internet Explorer 7 e versioni precedenti non supportano l'ereditarietà dei valori. IE8 supporta l'ereditarietà, ma è necessario<!DOCTYPE>. Supporta l'ereditarietà di IE9.
Si prega di consultare la seguente guida:CSS Text.
Proprietà correlate con il testo:letter-spacing,text-align,text-decoration,text-indent,text-overflow,text-transform,white-space,word-spacing.