Mode d’emploi
box-shadow: [inset] x y flou étalement couleur;- Décalage x/y déplace l’ombre ; les valeurs positives vont vers la droite et vers le bas.
- Flou l’adoucit.
- Étalement l’agrandit ou la réduit — un étalement négatif donne une ombre nette sous l’élément.
- Ombre douce empile quatre couches pour un rendu plus naturel.
Exemple concret
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) est une ombre de carte légère, courante dans les interfaces.
Questions fréquentes
Les ombres ralentissent-elles un site ?
Des ombres très grandes sur de nombreux éléments animés le peuvent ; utilisez-les avec mesure.
Comment ajouter plusieurs ombres ?
Séparez-les par des virgules, comme le fait l’option d’ombre douce.
box-shadow ou text-shadow ?
La première ombre la boîte de l’élément ; la seconde ombre les lettres et n’a ni étalement ni inset.