Ombre de boîte CSS

property box-shadow CSS

CSS box-shadow L'attribut applique une ombre à l'élément.

L'utilisation la plus simple est de spécifier uniquement l'ombre horizontale et verticale :

L'élément <div> jaune avec un box-shadow noir

Exemple

div {
  box-shadow: 10px 10px;
}

essayez-le vous-même

Ensuite, ajoutez une couleur à l'ombre :

L'élément <div> jaune avec un box-shadow gris

Exemple

div {
  box-shadow: 10px 10px gris;
}

essayez-le vous-même

Ensuite, ajoutez un effet de flou à l'ombre :

L'élément <div> jaune, avec un box-shadow flou

Exemple

div {
  box-shadow: 10px 10px 5px gris;
}

essayez-le vous-même

carte

Vous pouvez également utiliser box-shadow Effet de création de carte en papier pour l'attribut :

1
1er janvier 2021
Coffee
Coffee

Exemple

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Essayer personnellement : carte de papierEssayer personnellement : carte d'image

Property d'ombre CSS

Le tableau suivant liste les propriétés d'ombre CSS :

Property Description
box-shadow Ajouter une ou plusieurs ombres à un élément.
text-shadow Ajouter une ou plusieurs ombres dans le texte.