La propriété box-shadow
permet de créer des ombres sur un bloc. Cette propriété s’utilise de la façon suivante :
box-shadow: 1px 1px 5px 2px black;
Où les 5 valeurs correspondent, dans l’ordre :
- Décalage de l’ombre vers la droite
- Décalage de l’ombre vers le bas
- Valeur du flou de l’ombre
- Valeur de l’étendue de l’ombre
- Couleur de l’ombre
Si une valeur est omise, la valeur par défaut est de 0px. Il existe également le mot-clé inset, qui permet de créer une ombre interne. Il est possible d’ajouter des ombres multiples en les séparant par une virgule. Les ombres s’appliquent de haut en bas.
box-shadow: 0px 0px 2px white, 2px 2px 5px 4px black inset;
Cette propriété s’utilise de manière non-préfixée et est compatible dans IE9, Firefox 4, Chrome 10, Safari 5.1 et Opéra 10.5. Les préfixes -moz-
, -webkit-
peuvent cependant être ajoutés pour les anciennes versions de navigateur (depuis Firefox 3.5, Chrome 4, Safari 3.1 et sur *tous* les mobiles)