Syntaxe de Box Shadow
La propriété CSS box-shadow accepte des valeurs au format : offset-x offset-y blur-radius spread-radius color. Le mot-clé optionnel inset place l'ombre à l'interieur de l'élément. Les ombres multiples sont séparées par des virgules et rendues en ordre d'empilement.
Créer une profondeur realiste
Les effets d'ombre realistes utilisent plusieurs couches avec différentes valeurs de flou et d'opacite. Une ombre serree avec un faible flou fournit de la définition, tandis qu'une ombre plus grande et diffuse créé une occlusion ambiante. La combinaison produit une elevation naturelle.
Considerations de performance
Les box shadows sont accelerees par GPU dans les navigateurs modernes mais peuvent impacter les performances de rendu lorsqu'elles sont appliquées a de nombreux éléments simultanement. Évitez d'animer box-shadow directement ; utilisez plutot des transitions d'opacite sur un pseudo-élément.
Compatibilité des navigateurs
CSS box-shadow est pris en charge dans tous les navigateurs modernes y compris Chrome, Firefox, Safari et Edge. Aucun prefixe de fournisseur n'est nécessaire. Pour les très anciens navigateurs, envisagez de fournir une bordure solide comme repli.
