ACTUALIZACIÓN 4
Igual que la actualización 3 pero con css moderno (= menos reglas) para que no se requiera un posicionamiento especial en el pseudo elemento.
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
position: absolute;
top: calc(10% - 10px);
left: calc(50% - 80px);
}
.box-shadow:after {
content:"";
position:absolute;
width:100%;
bottom:1px;
z-index:-1;
transform:scale(.9);
box-shadow: 0px 0px 8px 2px #000000;
}
<div id="box" class="box-shadow"></div>
ACTUALIZACIÓN 3
Todas mis respuestas anteriores han estado usando marcado adicional para crear este efecto, que no es necesariamente necesario. Creo que esta es una solución mucho más limpia ... el único truco es jugar con los valores para obtener el posicionamiento correcto de la sombra, así como la fuerza / opacidad correcta de la sombra. Aquí hay un nuevo violín, usando pseudo-elementos :
http://jsfiddle.net/UnsungHero97/ARRRZ/2/
HTML
<div id="box" class="box-shadow"></div>
CSS
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}
ACTUALIZACIÓN 2
Aparentemente, puede hacer esto con solo un parámetro adicional para el CSS de sombra de cuadro como todos los demás acaban de señalar. Aquí está la demostración:
http://jsfiddle.net/K88H9/821/
CSS
-webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000;
box-shadow: 0 4px 4px -2px #000000;
Esta sería una mejor solución. El parámetro adicional que se agrega se describe como:
La cuarta longitud es una distancia extendida. Los valores positivos hacen que la forma de la sombra se expanda en todas las direcciones en el radio especificado. Los valores negativos hacen que la forma de la sombra se contraiga.
ACTUALIZAR
Echa un vistazo a la demostración en jsFiddle: http://jsfiddle.net/K88H9/4/
Lo que hice fue crear un "elemento de sombra" que se escondería detrás del elemento real en el que querrías tener una sombra. Hice que el ancho del "elemento de sombra" sea exactamente menos ancho que el elemento real en 2 veces la sombra que especifique; entonces lo alineé correctamente.
HTML
<div id="wrapper">
<div id="element"></div>
<div id="shadow"></div>
</div>
CSS
#wrapper {
width: 84px;
position: relative;
}
#element {
background-color: #3D668F;
height: 54px;
width: 100%;
position: relative;
z-index: 10;
}
#shadow {
background-color: #3D668F;
height: 8px;
width: 80px;
margin-left: -40px;
position: absolute;
bottom: 0px;
left: 50%;
z-index: 5;
-webkit-box-shadow: 0px 2px 4px #000000;
-moz-box-shadow: 0px 2px 4px #000000;
box-shadow: 0px 2px 4px #000000;
}
Respuesta original
Sí, puede hacerlo con la misma sintaxis que ha proporcionado. El primer valor controla el posicionamiento horizontal y el segundo valor controla el posicionamiento vertical. Así que solo establezca el primer valor 0pxy el segundo en el desplazamiento que desee de la siguiente manera:
-webkit-box-shadow: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000;
box-shadow: 0px 5px #000000;
Para obtener más información sobre las sombras de los cuadros, consulte estos:
Espero que esto ayude.
box-shadow-bottomque no existe y que nadie admite. Visite nicolasgallagher.com/css-drop-shadows-without-images/demo para conocer las técnicas legítimas de sombreado de cajas.