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

¿Hay alguna manera de soltar la sombra solo en la parte inferior? Tengo un menú con 2 imágenes una al lado de la otra. No quiero una sombra correcta porque se superpone a la imagen correcta. No me gusta usar imágenes para esto, así que hay una manera de soltarlo solo en la parte inferior como:

box-shadow-bottom: 10px #FFF; ¿o similar?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

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:

• 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

Espero que esto ayude.

Solo usa el parámetro spread para hacer la sombra más pequeña:

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

Demostración en vivo: http://dabblet.com/gist/a8f8ba527f5cff607327

Para no ver ninguna sombra en los lados, el radio de propagación (valor absoluto del) (cuarto parámetro) debe ser el mismo que el radio de desenfoque (tercer parámetro).

Si tiene un color fijo en el fondo, puede ocultar el efecto de sombra lateral con dos sombras de enmascaramiento que tengan el mismo color de fondo y desenfoque = 0, por ejemplo:

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

Tenga en cuenta que la sombra negra debe ser la última y tiene una dispersión negativa (-3px) para evitar que se extienda más allá de las esquinas.

Aquí el violín (cambia el color de las sombras de enmascaramiento para ver cómo funciona realmente ).

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

Creo que esto es lo que buscas?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

Siempre es mejor leer las especificaciones . No hay box-shadow-bottompropiedad, y como Lea señala, siempre debe colocar la propiedad sin prefijo en la parte inferior, después de las prefijadas.

Entonces es:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

¿Qué tal si usamos un div que contiene el desbordamiento configurado como oculto y algo de relleno en la parte inferior? Esta parece ser la solución más simple.

Lamento decir que no pensé en esto yo mismo, pero lo vi en otro lugar .

Usando un elemento para envolver el elemento obteniendo la sombra de la caja y un desbordamiento: oculto en la envoltura, puede hacer que la sombra de la caja adicional desaparezca y aún tenga un borde utilizable. Esto también soluciona el problema donde el elemento es más pequeño como parece, debido a la propagación.

Me gusta esto:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

El contenido va aquí

¡Sigue siendo una solución inteligente cuando tiene que hacerse en CSS puro!

Como dijo Jorgen Evens .

También puede usar clip-pathpara recortar (ocultar) todos los bordes desbordados, excepto el que desea mostrar:

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

Ver clip-path (MDN) . Los argumentos para polygonson el punto superior izquierdo , el punto superior derecho , el punto inferior derecho y el punto inferior izquierdo . Al establecer el borde inferior en 200%(o cualquier número mayor que 100%), restringe su desbordamiento solo al borde inferior.

También necesitaba una sombra pero solo debajo de una imagen y establecerla ligeramente a la izquierda y a la derecha. Esto funcionó para mí:

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

El elemento al que se aplica es una imagen de toda la página (980 px x 300 px).

Si ayuda al jugar con la configuración, se ejecutan de la siguiente manera:

sombra horizontal, sombra vertical, distancia de desenfoque, dispersión (es decir, tamaño de sombra) y color.

Es mejor buscar sombra:

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

Este código se está utilizando actualmente en la web stackoverflow.

Este bolígrafo de código (no para mí) demuestra una forma súper simple de hacer esto y los otros lados por sí mismos bastante bien:

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

Si su fondo es sólido (o puede reproducirlo usando CSS), puede usar un degradado lineal de esa manera:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

Esto generará un gradiente de 5px en la parte inferior del elemento, desde negro con una opacidad del 30% hasta completamente transparente. El resto del elemento tiene fondo blanco. Por supuesto, al cambiar las últimas 2 paradas de color del degradado lineal, puede hacer que el fondo sea completamente transparente.

También podría hacer un degradado en la parte inferior; esto fue útil para mí porque la sombra que quería estaba en un elemento que ya era semitransparente, por lo que no tuve que preocuparme por ningún recorte:

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

Simplemente haga que las propiedades "bottom" y "height" coincidan y configure sus valores rgba a lo que quiera que estén en la parte superior / inferior de la sombra

Puedes hacer eso así:

Sintaxis general:

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

Ejemplo: queremos hacer solo una sombra del cuadro inferior con color rojo,

para hacerlo, tenemos que establecer todas las opciones de los lados donde tenemos que establecer las opciones de sombra del cuadro inferior y configurar todas las demás como vacías de la siguiente manera:

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

actualice en otra persona su respuesta con lados transparentes en lugar de blanco para que también funcione en otros fondos de color.

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

sombra interior

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>