¿Cómo aplicar la sombra de caja en los cuatro lados?

Question

Estoy tratando de aplicar un box-shadow en los cuatro lados. Sólo podía conseguirlo en 2 partes:

Answer 1

Es a causa de x e y offset. Prueba esto:

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

edición (año más tarde ..): Hecha la respuesta más entre navegadores, como se pide en los comentarios :)

por cierto: hay muchos generador de CSS3 hoy en día .. css3.me, css3maker , etc ... css3generator

Answer 2

Ver: 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; 
} 

Answer 3

Esto se ve bien.

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

Answer 4

Encontré el sitio http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/.

.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); 
} 

Answer 5

Sólo simple como este código:

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

Answer 6

utilizar este código css para los cuatro lados: box-shadow: 0px 1px 7px 0px rgb (106, 111, 109);