Cualquier forma de obtener sombra de cuadro en los lados izquierdo y derecho (¿horizontal?) Solo sin hacks o imágenes. Estoy usando:

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

Pero da sombra por todas partes.

No tengo fronteras alrededor de los elementos.

NOTA: Sugiero revisar la respuesta de @ Hamish a continuación; no implica el "enmascaramiento" imperfecto en la solución descrita aquí.

Puedes acercarte con múltiples sombras de caja; uno para cada lado

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Editar

Agregue 2 sombras de cuadro más para la parte superior e inferior al frente para enmascarar el sangrado.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

No estaba satisfecho con la parte superior e inferior redondeadas de la sombra presente en la solución de Deefour, así que creé la mía.

inset box-shadow crea una agradable sombra uniforme con la parte superior e inferior cortadas.

Para usar este efecto en los lados de su elemento, cree dos pseudo elementos :beforey :aftercolóquelos absolutamente a los lados del elemento original.

div:before, div:after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  left: -15px;
}
div:after {
  box-shadow: 15px 0 15px -15px inset;
  right: -15px;
}

div {
  background: #EEEEEE;
  height: 100px;
  margin: 0 50px;
  width: 100px;
  position: relative;
}

<div></div>

Editar

Dependiendo de su diseño, puede usarlo clip-path, como se muestra en la respuesta de @ Luke. Sin embargo, tenga en cuenta que, en muchos casos, esto todavía hace que la sombra se reduzca en la parte superior e inferior, como puede ver en este ejemplo:

div {
  width: 100px;
  height: 100px;
  background: #EEE;
  box-shadow: 0 0 15px 0px #000;
  clip-path: inset(0px -15px 0px -15px);
  position: relative;
  margin: 0 50px;
}

<div></div>

Prueba esto, está funcionando para mí:

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

Enfoque clásico: propagación negativa

CSS box-shadow utiliza 4 parámetros: h-shadow, v-shadow, blur, spread:

box-shadow: 10px 0 8px -8px black;

La sombra v ( verical) se establece en 0.

El parámetro de desenfoque agrega el efecto de degradado, pero también agrega una pequeña sombra en los bordes verticales (del que queremos deshacernos).

negativo propagación reduce la sombra en todos los bordes: puedes jugar con ella tratando de eliminar esa pequeña sombra vertical sin afectar demasiado a la de los lados (es más fácil para sombras pequeñas, de 5 a 10 píxeles).

Aquí un ejemplo de violín .

Segundo enfoque: div absoluto en el costado

Agregue un div vacío en su elemento y estilícelo con un posicionamiento absoluto para que no afecte el contenido del elemento.

Aquí el violín con un ejemplo de sombra izquierda.

<div id="container">
  <div class="shadow"></div>
</div>

.shadow{
    position:absolute;
    height: 100%;
    width: 4px;
    left:0px;
    top:0px;
    box-shadow: -4px 0 3px black;
}

Tercero: sombra de enmascaramiento

Si tiene un fondo fijo, 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: 
    0 -6px white,          // Top Masking Shadow
    0 6px white,           // Bottom Masking Shadow
    7px 0 4px -3px black,  // Left-shadow
    -7px 0 4px -3px black; // Right-shadow

He agregado nuevamente una extensión negativa (-3px) a la sombra negra, para que no se extienda más allá de las esquinas.

Aquí el violín .

Esto funciona bien para todos los navegadores:

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;

MANIFESTACIÓN

Debes usar el múltiplo box-shadow;. La propiedad insertada hace que se vea bien y por dentro

div {
    box-shadow: inset 0 12px  15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px  8px -4px rgba(31, 73, 125, 0.8);
    width: 100px;
    height: 100px;
    margin: 50px;
    background: white;
}

Otra forma es con: overflow-y:hiddenen el padre con relleno.

#wrap {
    overflow-y: hidden;
    padding: 0 10px;
}
#wrap > div {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 20px -5px red;
}

http://jsfiddle.net/qqx221c8/

clip-pathahora es (2020) la mejor manera que he encontrado para lograr sombras de caja en lados específicos de elementos, especialmente cuando el efecto requerido es una sombra de "corte limpio" en bordes particulares , como este:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px -15px);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

... a diferencia de una sombra atenuada / reducida / adelgazante como esta:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

Simplemente aplique el siguiente CSS al elemento en cuestión:

box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Dónde:

• Apx establece la visibilidad de sombra para el borde superior
• Bpx Derecha
• Cpx fondo
• Dpx izquierda

Ingrese un valor de 0 para cualquier borde donde la sombra debe estar oculta y un valor negativo (el mismo que el resultado combinado del radio de desenfoque + valores de dispersión - Xpx + Ypx) a cualquier borde donde se debe mostrar la sombra.

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

Funciona de mi lado. Espero que te ayude.

BONITA SOMBRA EN EL LADO IZQUIERDO Y DERECHO PARA DIVS, IMÁGENES O CONTENIDOS INTERNOS

Para una bonita sombra insertada en los lados derecho e izquierdo de las imágenes, o cualquier otro contenido, úselo de esta manera

*** El índice z: -1 hace un buen truco al mostrar imágenes u objetos internos con inserciones

<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

<style>

.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}

.innercontent{
z-index:-1
}
</style>
</html>

En algunas situaciones, puede ocultar la sombra en otro contenedor. Por ejemplo, si hay un DIV encima y debajo del DIV con la sombra, puede usarlo position: relative; z-index: 1;en los DIV circundantes.

Solo para horizontal, puede engañar a la sombra de cuadro utilizando el desbordamiento en su div principal:

<div class="parent">
  <div class="box-shadow">content</div>
</div>

.parent{
  overflow:hidden;
}
.box-shadow{
  box-shadow: box-shadow: 0 5px 5px 0 #000;
}

Otra idea podría ser crear un pseudo elemento oscuro y borroso, eventualmente con transparencia para imitar la sombra. Hazlo con un poco menos de altura y más ancho ig

Puedes usar 1 div dentro de eso para "borrar" la sombra:

.yourdiv{
    position:relative;
    width:400px;
    height:400px;
    left:10px;
    top:40px;
    background-color:white;
    box-shadow: 0px 0px 1px 0.5px #5F5F5F;

}
.erase{
    position:absolute;
    width:100%;
    top:50%;
    height:105%;
    transform:translate(0%,-50%);
    background-color:white;
}

Puedes jugar con "height:%;" y "ancho:%;" para borrar la sombra que quieres.

Por alguna razón, las respuestas proporcionadas aquí simplemente no funcionarían en mi caso. Entonces, me puse creativo. Aquí hay una nueva solución para todos los que utiliza linear-gradient()en lugar de box-shadow.

p {
  padding: 1rem;
  background-color: #b55;
  color: white;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) .5rem, rgba(0,0,0,0), rgba(0,0,0,0.0) calc(100% - .5rem), rgba(0,0,0,0.5));
}

<p>Testing</p>

Aunque no estoy buscando discutir el punto, esta no es realmente una "caja" que usted (nosotros) estamos tratando de formar, así que supongo que podría decirse que box-shadowno tenía sentido para empezar.

Traté de copiar el bootstrap shadow-sm justo en el lado derecho, aquí está mi código:

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}