Ombre de la boîte pour le côté inférieur seulement

Question

J'ai une boîte de contenu et je dois donner de l'ombre pour cela. Mais je veux donner de l'ombre pour le bas de la boîte seulement. J'ai utilisé ceci css box-shadow: 0 3px 5px #000000;

Si je donne ce code, il montre la gauche, la droite et le bas. J'ai besoin du bas seulement

Quelqu'un peut-il suggérer de résoudre ce problème ? Merci beaucoup.

Answer 1

Vous pouvez faire ce qui suit après avoir ajouté la classe one-edge-shadow ou utiliser comme vous le souhaitez.

.one-edge-shadow {
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}

Source :

Answer 2

Vous devez spécifier negative spread dans l'ombre de la boîte pour supprimer l'ombre latérale

-webkit-box-shadow: 0 10px 10px -10px #000000;
   -moz-box-shadow: 0 10px 10px -10px #000000;
        box-shadow: 0 10px 10px -10px #000000;

Vérifiez http://dabblet.com/gist/9532817 et essayer de changer les propriétés pour savoir comment il se comporte

Answer 3

Indiquez une valeur négative pour la valeur d'étalement. Cela fonctionne pour moi :

box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1);

Answer 4

-webkit-box-shadow: 0 3px 5px -3px #000;
-moz-box-shadow: 0 3px 5px -3px #000;
box-shadow: 0 3px 5px -3px #000;