Définir l'ombre de la boîte uniquement en bas dans CSS

Cet article présentera les ensembles box-shadow uniquement au bas de la boîte en CSS.

Utilisez la propriété box-shadow pour définir l’ombre de la boîte inférieure en CSS

Nous pouvons utiliser la propriété box-shadow pour définir l’ombre uniquement au bas de la boîte. La propriété box-shadow définit l’ombre de l’élément sélectionné.

La propriété prend plusieurs options. Commençons par comprendre la propriété à partir de sa syntaxe, illustrée ci-dessous.

box-shadow: [h-offset] [v-offset] [blur-radius] [spread-radius] [color];

Il est essentiel de comprendre le fonctionnement de la propriété box-shadow pour l’implémenter. L’option h-offset définit l’ombre dans la direction horizontale de l’élément.

La valeur positive définira l’ombre dans la direction droite de l’élément, tandis que la valeur négative définira l’ombre dans la direction gauche de l’élément.

De même, l’option v-offset définit l’ombre verticalement. Encore une fois, la valeur positive place l’ombre en bas, tandis que la valeur négative la place en haut de l’élément.

L’option blur-radius indique le rayon de flou de l’ombre. À mesure que le rayon de flou augmente, l’ombre devient plus floue.

L’option spread-radius fixe la taille de l’ombre à l’élément. La valeur positive augmente la taille de l’ombre tandis que la valeur négative diminue.

Nous pouvons également utiliser l’option color pour définir la couleur de l’ombre. Cependant, les options blur-radius, spread-radius et color sont optionnelles.

Maintenant que nous avons appris le fonctionnement de la propriété box-shadow, il est temps de l’implémenter pour créer une ombre inférieure sur une boîte.

Pour cela, nous pouvons mettre h-offset à 0 et donner une valeur à v-offset. En conséquence, l’ombre n’apparaîtra qu’au bas de la boîte.

Par exemple, créez une boîte avec une certaine hauteur et largeur. Définissez la propriété background-color sur black.

Ensuite, utilisez la propriété box-shadow pour définir les différentes options. Réglez 0 pour h-offset, 8px pour v-offset, 2px pour blur-radius, 2px pour spread-radius et la color sur gray.

En conséquence, nous obtenons une boîte noire avec une ombre grise en bas. Ainsi, nous avons appris à utiliser la propriété box-shadow pour définir l’ombre au bas de la boîte en CSS.

<div class="box">
</div>

.box {
 height:200px;
 width:200px;
 background-color:black;
 box-shadow: 0 8px 2px -2px gray;
}