Comment régler l'ombre de la boîte uniquement en bas dans CSS?

Pour ajouter du style et du design au texte et aux éléments, l'effet d'ombre est utilisé. Il peut être ajouté à un élément avec le "boîte ombre»Propriété CSS. En utilisant des virgules, vous pouvez définir plusieurs effets à la fois, je.e., ombre horizontale, ombre verticale, radius flou, etc. Cette propriété fournit différentes fonctionnalités de l'image à l'aide de composants de couleur.

Ce manuel fournira la méthode liée au réglage «boîte ombre"Seulement au bas d'un élément.

Propriété Box-Shadow CSS

CSS propose une propriété nommée «boîte ombre"Cela nous permet de définir une ombre sur n'importe quel élément ou image. Cette propriété a les aspects suivants:

• • Offset-X: Il est utilisé pour ajouter une ombre horizontale.
  • Offset-y: Il est utilisé pour ajouter une ombre verticale.
  • couleur: Il est utilisé pour définir la couleur de l'ombre.

Syntaxe

Pour clarifier ces points, passons à la syntaxe de Drop Shadow:

Box-Shadow: Offset-x Offset-y Blur-Radius Couleur;

• • Offset-X et Offset-y seront positifs ou négatifs.
  • En horizontal, une valeur positive est utilisée pour ajouter l'effet du côté droit, et un négatif est pour le côté gauche.
  • En vertical, la valeur positive est pour le côté inférieur, et le négatif est pour le haut.
  • Blur-Radius rend l'ombre plus brillante ou plus légère.
  • À la place de la couleur, vous affecterez la couleur que vous souhaitez donner à l'image.

Pour une meilleure compréhension, mettons en œuvre un exemple pratique du «boîte ombre" propriété.

Exemple: comment régler l'ombre de la boîte uniquement en bas dans CSS?

Nous appliquerons l'effet de l'ombre de la boîte à une image. Pour cela, nous ajouterons une image en HTML, puis nous appliquerons la propriété CSS "boîte ombre«À lui:

Cela donnera la sortie suivante:

Déplacez-vous pour ajouter un effet d'ombre sur le bas de l'image:

img
Box-shadow: 0px 15px 5px orange;

Les valeurs ci-dessus représentent les points suivants:

• • Offset-x est "0px«Parce que nous ne voulons pas afficher l'ombre horizontalement.
  • Offset-y est "15px"Pour définir la largeur de l'ombre. Il doit être positif car il affiche une ombre au bas de l'image.
  • Blur-Radius est "5px". Ça rend l'ombre plus légère.
  • La couleur de l'ombre est «orange".

Dans cette image, nous pouvons voir l'ombre en bas.

Conclusion

Pour afficher l'ombre en bas de l'image, le «boîte ombre»La propriété est utilisée. À cette fin, Offset-X est défini comme «0», Offset-y est une valeur positive, et la couleur que vous souhaitez afficher est également définie. À l'aide d'un exemple, cet article a expliqué comment afficher les ombres uniquement en bas de l'image.