web-dev-qa-db-fra.com

Comment appliquer une ombre sur les quatre côtés?

J'essaie d'appliquer un box-shadow sur les quatre côtés. Je ne pouvais l'obtenir que sur 2 côtés:

csscss3box-shadow
67
dragonfly

C'est à cause de x et y offset. Essaye ça:

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

edit (year later ..): a fait la réponse plus multi-navigateur, comme demandé dans les commentaires :)

btw: il y a beaucoup de générateurs CSS3 de nos jours .. css3.me , css3maker , css3generator etc ...

107
Damb

Voir: http://jsfiddle.net/thirtydot/cMNX2/8/

input {
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}
34
thirtydot

Cela a l'air cool.

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
10
Nalan Madheswaran

Aussi simple que ce code:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/
6
Pankskie

La solution la plus simple et la plus simple consiste à ajouter des ombres sur les quatre côtés. CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
3
Huzaif Sayyed

J'ai trouvé le http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ site.

.allSides
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
2
user3619130

Vous pouvez différentes combinaisons sur le lien suivant.
https://www.cssmatic.com/box-shadow

Les résultats dont vous avez besoin peuvent être obtenus avec le CSS suivant

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
0
Ans

Utilisez ce code CSS pour les quatre côtés: box-shadow: 0px 1px 7px 0px rgb (106, 111, 109);

0
Bal mukund kumar