¿Cómo crear una sombra paralela solo en un lado de un elemento?

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 pseudoelemento.

#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 utilizado 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 la posición correcta de la sombra, así como la intensidad/opacidad correcta de la sombra. Aquí hay un nuevo violín que utiliza pseudoelementos :

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, puedes hacer esto con solo un parámetro adicional al CSS box-shadow 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 direcciones según el radio especificado. Los valores negativos hacen que la forma de la sombra se contraiga.

ACTUALIZAR

Vea 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 te gustaría tener una sombra. Hice que el ancho del "elemento de sombra" fuera exactamente menos ancho que el elemento real por 2 veces la sombra que especificas; luego 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í, puedes hacer esto con la misma sintaxis que proporcionaste. El primer valor controla el posicionamiento horizontal y el segundo valor controla el posicionamiento vertical. Así que simplemente 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 cuadros, consulte estos:

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

Mar 28 '2011 14:03 Hristo