Faire son site 11 : Référence CSS - box-shadow

box-shadow

La propriété box-shadow ajoute des ombres à la boîte d'un élément.

La propriété est définie par 2, 3 ou 4 valeurs de type <length>, du mot-clé optionnel inset et d'une valeur optionnelle de type <color>.

La première valeur indique la largeur de l'ombre sur les côtés verticaux de l'élément. Une valeur positive place l'ombre à droite de la boîte tandis qu'une valeur négative place l'ombre à gauche.

La deuxième valeur indique la largeur de l'ombre sur les côtés horizontaux de l'élément. Une valeur positive place l'ombre en bas de la boîte tandis qu'une valeur négative place l'ombre en haut.

box-shadow: 3px 10px black;


La troisième valeur, si elle est présente, indique le niveau de diffusion du flou de l'ombre.

box-shadow: 3px 10px 5px black;


La quatrième valeur, si elle est présente, étale l'ombre lorsqu'elle est positive et la réduit lorsqu'elle est négative.

box-shadow: 3px 10px 5px 10px black;


Si la couleur est omise, l'ombre aura la couleur de la propriété color de l'élément.

box-shadow: 3px 10px;


Le mot-clé inset place l'ombre à l'intérieur de l'élément.

box-shadow: inset -3px -10px black;


Il est possible de cumuler les ombres en les séparant par une virgule.

box-shadow: inset 3px 3px 5px black, 3px 3px 5px red;