Propriété box-shadow

La propriété box-shadow définit une ombre pour un bloc. Comme valeur, la propriété accepte 6 paramètres, énumérés par un espace, ou le mot-clé none, qui supprime complètement l'ombre.

Syntaxe

sélecteur {
	box-shadow: inset décalage_x décalage_y flou taille_ombre couleur;
}

sélecteur {
	box-shadow: none;
}

Paramètres

Paramètre	Description
`inset`	Paramètre optionnel. S'il est spécifié, l'ombre sera à l'intérieur du conteneur, sinon - à l'extérieur.
décalage x	Définit le décalage de l'ombre sur l'axe X. Une valeur positive décale vers la droite, une valeur négative - vers la gauche.
décalage y	Définit le décalage de l'ombre sur l'axe Y. Une valeur positive décale vers le bas, une valeur négative - vers le haut.
flou	Définit le flou de l'ombre. Plus la valeur est grande, plus l'ombre sera floue. Paramètre optionnel. S'il n'est pas spécifié - l'ombre sera nette.
taille ombre	Définit la taille de l'ombre. Une valeur positive étire l'ombre, une valeur négative, au contraire, la rétrécit. Paramètre optionnel. S'il n'est pas spécifié - l'ombre aura la même taille que l'élément.
couleur	Définit la couleur de l'ombre dans n'importe quelles unités de couleur. Paramètre optionnel. S'il n'est pas spécifié - la couleur de l'ombre correspond à la couleur du texte.

Les décalages sur les axes, le flou et la taille de l'ombre sont spécifiés dans n'importe quelles unités de taille, sauf les pourcentages.

Exemple

Dans cet exemple, l'ombre est décalée vers le bas et la droite et un léger flou est ajouté :

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

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

Exemple . Ombre nette

Dans cet exemple, l'ombre est décalée vers le bas et la droite, mais il n'y a pas de flou (l'ombre sera nette) :

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

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

Exemple . Ombre uniforme

Dans cet exemple, l'ombre n'est pas décalée, mais un flou lui est ajouté :

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

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

Exemple . Taille de l'ombre

Dans cet exemple, l'ombre n'est pas décalée, le flou est nul, mais une taille lui est ajoutée (le noir est la bordure, le rouge est l'ombre) :

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

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

Exemple . Flou + taille de l'ombre

Dans cet exemple, l'ombre n'est pas décalée, mais un flou et une taille lui sont ajoutés (le noir est la bordure, le rouge est l'ombre) :

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

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

Exemple . Ombre intérieure

Dans cet exemple, l'ombre est à l'intérieur du conteneur :

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

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

Voir aussi

la propriété text-shadow,
qui définit une ombre pour le texte