Fonction drop-shadow() CSS

Définition et utilisation

CSS drop-shadow() Les fonctions de filtre appliquent des effets de projection aux images.

Ajoutez différents effets de projection à l'image :

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

Ajoutez différents effets de projection à l'image (utilisez des valeurs négatives pour les ombres horizontales et verticales) :

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow blur spread color)

Valeur	Description
h-shadow	Obligatoire. Spécifiez la valeur en pixels de l'ombre horizontale. Une valeur négative place l'ombre à gauche de l'image.
v-shadow	Obligatoire. Spécifiez la valeur en pixels de l'ombre verticale. Une valeur négative place l'ombre au-dessus de l'image.
blur	Optionnel. Ajoutez un effet de flou à l'ombre, en pixels. Plus la valeur est grande, plus l'effet de flou est fort (l'ombre deviendra plus grande et plus pâle). Les valeurs négatives ne sont pas autorisées. Si non spécifié, il est par défaut 0 (l'ombre a une edge nette).
spread	Optionnel. Doit être une valeur en pixels. Une valeur positive fait que l'ombre s'étend et grandit, une valeur négative fait que l'ombre se rétrécit. Si non spécifié, il est par défaut 0 (l'ombre a la même taille que l'élément).
color	Optionnel. Ajoutez une couleur à l'ombre. Si non spécifié, la couleur dépend du navigateur (généralement noire).