Attribut box-shadow CSS

Définition et utilisation

L'attribut box-shadow ajoute une ou plusieurs ombres au cadre.

Astuce :Utilisez les attributs border-image-* pour construire des boutons élastiques jolis !

Voir également :

Tutoriel CSS3 :Bordure CSS3

Manuel de référence HTML DOM :Attribut boxShadow

Exemple

Ajoutez box-shadow au élément div :

div
{
box-shadow: 10px 10px 5px #888888;
}

Essayez-le vous-même

Plus d'exemples en bas de la page.

Syntaxe CSS

box-shadow: h-shadow v-shadow blur spread color inset;

Remarque :L'attribut box-shadow ajoute une ou plusieurs ombres au cadre. Cette propriété est une liste d'ombres séparées par des virgules, chaque ombre étant définie par 2 à 4 valeurs de longueur, une valeur optionnelle de couleur et une optionnelle mot-clé inset. Les valeurs omises sont 0.

Valeur de l'attribut

Valeur Description Test
h-shadow Obligatoire. Position horizontale de l'ombre. Les valeurs négatives sont autorisées. Test
v-shadow Obligatoire. Position verticale de l'ombre. Les valeurs négatives sont autorisées. Test
blur Optionnel. Distance de flou. Test
spread Optionnel. Dimension de l'ombre. Test
color Optionnel. Couleur de l'ombre. Voir les valeurs de couleur CSS. Test
inset Optionnel. Changez l'ombre externe (outset) en ombre interne. Test

Détails techniques

Valeur par défaut : aucune
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : object.style.boxShadow="10px 10px 5px #888888"

Plus d'exemples

Image jetée sur la table
Cet exemple montre comment créer une image Polaroid et la faire pivoter.

Support du navigateur

Les numéros dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en totalité.

Les nombres avec -webkit- ou -moz- indiquent la première version utilisant le préfixe.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5