Proprietà CSS box-shadow

Definizione e uso

L'attributo box-shadow aggiunge una o più ombre al riquadro.

Suggerimento:Usa le proprietà border-image-* per costruire pulsanti flessibili e belli!

Vedi anche:

Corso CSS3:Bordo CSS3

Manuale HTML DOM:Proprietà boxShadow

Esempio

Aggiungi box-shadow al elemento div:

div
{
box-shadow: 10px 10px 5px #888888;
}

Prova tu stesso

Ci sono più esempi in fondo alla pagina.

Sintassi CSS

box-shadow: h-shadow v-shadow blur spread colore inset;

Nota:L'attributo box-shadow aggiunge una o più ombre al riquadro. L'attributo è una lista di ombre separata da virgole, ciascuna definita da 2-4 valori di lunghezza, un valore opzionale di colore e un'opzionale parola chiave inset. I valori di lunghezza omessi sono 0.

Valore dell'attributo

Valore Descrizione Test
h-shadow Obbligatorio. Posizione dell'ombra orizzontalmente. Permette valori negativi. Test
v-shadow Obbligatorio. Posizione dell'ombra verticalmente. Permette valori negativi. Test
blur Opzionale. Distanza di sfocatura. Test
spread Opzionale. Dimensione dell'ombra. Test
colore Opzionale. Colore dell'ombra. Vedi i valori di colore CSS. Test
inset Opzionale. Modifica l'ombra esterna (outset) in ombra interna. Test

Dettagli tecnici

Valore predefinito: nessuna
Ereditarietà: no
Versione: CSS3
Sintassi JavaScript: oggetto.style.boxShadow="10px 10px 5px #888888"

Più esempi

L'immagine gettata sulla tavola
Questo esempio dimostra come creare un'immagine Polaroid e ruotare l'immagine.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

I numeri con -webkit- o -moz- come prefisso rappresentano la prima versione utilizzata.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5