Comment créer des ombres de boîte avec CSS ?

La propriété `box-shadow` prend jusqu'à quatre valeurs, qui spécifient le décalage, le flou et la propagation de l'ombre, ainsi que la couleur de l'ombre.

1. Décalage :Les valeurs de décalage spécifient la distance horizontale et verticale de l'ombre à l'élément. Les valeurs positives déplacent l'ombre vers la droite et vers le bas, tandis que les valeurs négatives déplacent l'ombre vers la gauche et vers le haut.

2. Flou :La valeur de flou spécifie la quantité de flou appliquée à l'ombre. Une valeur de flou plus élevée créera une ombre plus douce, tandis qu'une valeur de flou plus faible créera une ombre plus nette.

3. Propagation :La valeur de propagation spécifie la quantité de propagation appliquée à l'ombre. Une valeur d'étalement plus élevée créera une ombre plus large, tandis qu'une valeur d'étalement plus faible créera une ombre plus étroite.

4. Couleur :La valeur de couleur spécifie la couleur de l'ombre. Toute valeur de couleur CSS valide peut être utilisée.

Voici quelques exemples d'utilisation de la propriété `box-shadow` pour créer différents types d'ombres :

- Pour créer une ombre portée simple, utilisez une valeur de décalage positive et une valeur de flou faible, comme ceci :

```css

boîte-ombre :5px 5px 5px #888888 ;

```

- Pour créer une ombre plus douce, augmentez la valeur du flou, comme ceci :

```css

boîte-ombre :5px 5px 10px #888888 ;

```

- Pour créer une ombre plus large, augmentez la valeur d'étalement, comme ceci :

```css

boîte-ombre :5px 5px 10px 5px #888888 ;

```

- Pour créer une ombre colorée, spécifiez une valeur de couleur, comme ceci :

```css

box-shadow :5px 5px 10px 5px rouge ;

```

La propriété « box-shadow » est un outil puissant qui peut être utilisé pour créer une variété d'effets visuels. Expérimentez avec différentes valeurs pour voir ce que vous pouvez créer !