p ( text-shadow: 1px 1px 1px #000; )Puoi applicare più ombre di testo separando le virgole
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )I primi due valori specificano la lunghezza dell'offset dell'ombra. Il primo valore specifica la distanza orizzontale e il secondo specifica la distanza verticale dell'ombra. Il terzo valore specifica il raggio di sfocatura e l'ultimo valore descrive il colore dell'ombra:
1. value = La coordinata X
2. value = La coordinata Y
3. value = Il raggio di sfocatura
4. value = Il colore dell'ombra
L'uso di numeri positivi come primi due valori finisce per posizionare l'ombra a destra del testo in orizzontale (primo valore) e posizionare l'ombra sotto il testo verticalmente (secondo valore).
Il terzo valore, il raggio di sfocatura, è un valore opzionale che può essere specificato ma non è necessario. È la quantità di pixel che il testo viene allungato che provoca un effetto sfocato. Se non utilizzi il terzo valore, viene trattato come se avessi specificato un raggio di sfocatura pari a zero.
Inoltre, ricorda che puoi utilizzare i valori RGBa o HSLa per il colore, ad esempio, una trasparenza del 40% del bianco:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Esempi
Vedere gli esempi di ombreggiatura del testo complesso penna di Chris Coyier (@chriscoyier) su CodePen.
Maggiori informazioni
- Documenti MDN
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3.5+ | 9.5+ | 10+ | qualunque | qualunque |