En CSS, la propriété box-shadow reçoit les paramètres suivants :
box-shadow [inset] offset-x offset-y [blur-radius] [spread-radius] [color];
- inset [optionnel] : ombre intérieure
- offset-x : La distance horizontale à droite de la boîte où l'ombre sera affichée.
- offset-y : La distance verticale sous la boîte où l'ombre sera affichée.
- blur-radius [optionnel] : Cette valeur détermine le degré de flou de l'ombre
- spread-radius [optionnel] : diffuse l'ombre.
- color [optionnel] : définit la couleur de l'ombre.
En CSS, la propriété box-shadow est utilisée pour ajouter des ombres aux éléments. Elle peut prendre plusieurs valeurs pour contrôler l'apparence de l'ombre. Voici les paramètres que vous pouvez spécifier avec box-shadow:
box-shadow [inset] offset-x offset-y [blur-radius] [spread-radius] [color];
- inset [optionnel] : Lorsque vous ajoutez l'élément inclus, l'ombre passe d'une ombre extérieure (qui tombe à l'extérieur de la boîte) à une ombre intérieure.
offset-x : La distance horizontale à droite de la boîte où l'ombre sera affichée. Une valeur négative placera l'ombre à gauche de la boîte.
offset-y : La distance verticale sous la boîte où l'ombre sera affichée. Une valeur négative placera l'ombre au-dessus de la boîte.
- blur-radius [optionnel] : Cette valeur détermine le degré de flou de l'ombre, en la rendant plus grande et plus légère. Plus la valeur est élevée, plus l'ombre est floue et grande. Si aucune valeur n'est définie, l'ombre sera nette.
- spread-radius [optionnel] : Cette valeur facultative permet à l'ombre de s'étendre ou de se rétrécir. Si elle est positive, l'ombre s'étend et devient plus grande que l'élément source, tandis que si elle est négative, elle se rétrécit.
- color [optionnel] : La couleur de l'ombre. Si elle n'est pas spécifiée, elle hérite généralement de la couleur du texte. Les couleurs peuvent être définies dans plusieurs formats en CSS, notamment le nom de la couleur, RGB, RGBA, HEX, HSL, HSLA, etc.
Le paramètre box-shadow peut accepter des valeurs séparées par des virgules pour créer plusieurs ombres sur le même élément.
Number of parameters
- Lorsque deux valeurs sont spécifiées :
<offset-x><offset-y>. - Lorsque trois valeurs sont spécifiées :
<offset-x><offset-y><blur-radius> - Lorsque quatre valeurs sont spécifiées :
<offset-x><offset-y><blur-radius><spread-radius>
Exemple d'utilisation :
.box {
width: 100px;
height: 100px;
background-color: #666;
box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
}
Cela créera une ombre décalée de 10 pixels vers la droite et de 10 pixels vers le bas à partir de .box, avec un rayon de flou de 20 pixels et un rayon d'étalement de 5 pixels, en utilisant une couleur noire semi-transparente.
Voici quelques exemples en ligne :