Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété box-shadow

Description de la propriété box-shadow.

box-shadow ajoute un effet d'ombrage sur l'élément. De nombreux paramètres permettent de définir cette ombre : dimensions, couleur, effet de flou, etc.

Exemple

Syntaxes pour box-shadow.

  • box-shadow: 15px 15px 10px 5px #808080 inset x y f a coul

    Syntaxe générale de box-shadow : une série de valeurs séparées par des espaces.

    1. x : une valeur positive ou négative suivie d'une unité de dimension (voir les unités de dimensions en CSS). C'est le décalage horizontal de l'ombre.
    2. y : une valeur positive ou négative avec une unité de dimension. C'est le décalage vertical de l'ombre.
    3. f : une valeur positive avec une unité de dimension. Elle définit le rayon du flou. Une valeur égale à 0 indique une ombre nette.
    4. a : une valeur positive ou négative avec une unité de dimension. Les valeurs positives indiquent un agrandissement de l'ombre. Et bien sûr les valeurs négatives une réduction de la taille de l'ombre.
      Si l est supérieur à x ou à y, l'ombre peut apparaître tout autour de l'élément.
    5. coul : une indication de couleur (voir les couleurs CSS) qui sera la couleur de l'ombre. La valeur par défaut est currentcolor.
    6. inset : lorsqu'il est présent, ce mot indique une ombre à l'intérieur de l'élément.

    Ces valeurs sont optionnelles mais doivent être énumérées dans cet ordre. Un décalage doit cependant être indiqué pour que l'ombre soit visible.

  • box-shadow: none;

    Valeur par défaut. Aucune ombre n'est ajoutée.

  • box-shadow: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Exemples.

Cliquez sur les exemples pour afficher leur code CSS.

Ombre dure : pas de flou, avec un décalage de 10 pixels dans les deux sens (horizontalement et verticalement).

Ombre douce : avec un flou sur 15 pixels.

Ombre intérieure, donnant l'impression que l'élément est en creux.
Ombre étendue de 15 pixels. Cette valeur étant supérieure au décalage (qui est de 10 pixels), l'ombre apparait tout autour de l'élément.
Cette ombre ne comporte pas de décalage ; elle est seulement étendue. L'ombre apparait tout autour de l'élément de façon symétrique.
Ombre inversée : les décalages x et y ont été fixés à -10 pixels.