Proprietà box-shadow

La proprietà box-shadow imposta l'ombra di un blocco. Come valore, la proprietà accetta 6 parametri, elencati separati da spazi, oppure la parola chiave none, che disabilita completamente l'ombra.

Sintassi

selettore {
	box-shadow: inset spostamento_x spostamento_y sfocatura dimensione_ombra colore;
}

selettore {
	box-shadow: none;
}

Parametri

Parametro	Descrizione
`inset`	Parametro opzionale. Se specificato, l'ombra sarà all'interno del contenitore, altrimenti sarà all'esterno.
spostamento per x	Imposta lo spostamento dell'ombra lungo l'asse X. Un valore positivo sposta a destra, uno negativo a sinistra.
spostamento per y	Imposta lo spostamento dell'ombra lungo l'asse Y. Un valore positivo sposta verso il basso, uno negativo verso l'alto.
sfocatura	Imposta la sfocatura dell'ombra. Maggiore è il valore, più sfocata sarà l'ombra. Parametro opzionale. Se non specificato, l'ombra sarà netta.
dimensione ombra	Imposta la dimensione dell'ombra. Un valore positivo espande l'ombra, un valore negativo, al contrario, la comprime. Parametro opzionale. Se non specificato, l'ombra avrà la stessa dimensione dell'elemento.
colore	Imposta il colore dell'ombra in qualsiasi unità di misura per il colore. Parametro opzionale. Se non specificato, il colore dell'ombra corrisponde al colore del testo.

Gli spostamenti lungo gli assi, la sfocatura e la dimensione dell'ombra sono specificati in qualsiasi unità di misura per dimensioni, eccetto le percentuali.

Esempio

In questo esempio l'ombra è spostata in basso e a destra ed è stata aggiunta una leggera sfocatura:

<div id="elem"></div>

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Esempio . Ombra netta

In questo esempio l'ombra è spostata in basso e a destra, ma non c'è sfocatura (l'ombra sarà netta):

<div id="elem"></div>

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Esempio . Ombra uniforme

In questo esempio l'ombra non è spostata, ma le è stata aggiunta della sfocatura:

<div id="elem"></div>

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Esempio . Dimensione ombra

In questo esempio l'ombra non è spostata, la sfocatura è zero, ma le è stata aggiunta una dimensione (il nero è il bordo, il rosso è l'ombra):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

Esempio . Sfocatura + dimensione ombra

In questo esempio l'ombra non è spostata, ma le sono state aggiunte sia la sfocatura che la dimensione (il nero è il bordo, il rosso è l'ombra):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Esempio . Ombra interna

In questo esempio l'ombra si trova all'interno del contenitore:

<div id="elem"></div>

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Vedi anche

la proprietà text-shadow,
che imposta l'ombra al testo