Qualquer maneira de obter a sombra da caixa nos lados esquerdo e direito (horizontal?) Apenas sem hacks ou imagens. Estou usando:

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

Mas dá sombra ao redor.

Não tenho fronteiras em torno dos elementos.

NOTA: Sugiro verificar a resposta de @ Hamish abaixo; não envolve o "mascaramento" imperfeito na solução descrita aqui.

Você pode se aproximar com várias sombras de caixa; um 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

Adicione mais duas sombras de caixa para a parte superior e a parte inferior da frente para mascarar o que sangra.

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/

Eu não estava satisfeito com a parte superior e inferior arredondada da sombra presente na solução de Deefour, então criei a minha.

inset box-shadow cria uma bela sombra uniforme com as partes superior e inferior cortadas.

Para usar esse efeito nas laterais do seu elemento, crie dois pseudo-elementos :beforee :afterposicionados absolutamente nas laterais do 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

Dependendo do seu design, você poderá usá-lo clip-path, como mostra a resposta de @ Luke. No entanto, observe que em muitos casos isso ainda resulta na diminuição da sombra na parte superior e inferior, como você pode ver neste exemplo:

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>

Tente isso, está funcionando para mim:

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

Abordagem clássica: spread negativo

O CSS box-shadow usa 4 parâmetros: h-shadow, v-shadow, blur, spread:

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

A sombra em v ( sombra vertical) é definida como 0.

O parâmetro blur adiciona o efeito gradiente, mas também adiciona um pouco de sombra nas bordas verticais (a que queremos nos livrar).

A propagação negativa reduz a sombra em todas as bordas: você pode brincar tentando remover essa pequena sombra vertical sem afetar muito a que fica nas laterais (é mais fácil para sombras pequenas, de 5 a 10px).

Aqui está um exemplo de violino .

Segunda abordagem: div absoluta do lado

Adicione uma div vazia ao seu elemento e estilize-a com posicionamento absoluto para que não afete o conteúdo do elemento.

Aqui o violino com um exemplo de sombra esquerda.

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

Terceiro: Sombra de máscara

Se você tiver um plano de fundo fixo, poderá ocultar o efeito de sombra lateral com duas sombras de máscara com a mesma cor do plano de fundo e desfoque = 0, exemplo:

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

Adicionei novamente uma propagação negativa (-3px) à sombra preta, para que ela não se estenda além dos cantos.

Aqui o violino .

Isso funciona bem para todos os 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;

DEMO

Você deve usar o múltiplo box-shadow;. A propriedade de inserção faz com que pareça agradável e interna

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

Outra maneira é com: overflow-y:hiddenno pai com estofamento.

#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-pathé agora (2020) a melhor maneira que encontrei para obter sombras de caixa em lados específicos de elementos, especialmente quando o efeito necessário é uma sombra de "corte limpo" em bordas específicas , como esta:

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

... em oposição a uma sombra atenuada / reduzida / diluída 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>

Basta aplicar o seguinte CSS ao elemento em questão:

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

Onde:

• Apx define a visibilidade da sombra para a borda superior
• Bpx certo
• Cpx inferior
• Dpx esquerda

Digite um valor 0 para todas as arestas nas quais a sombra deve estar oculta e um valor negativo (o mesmo que o resultado combinado do raio de desfoque + valores de propagação - Xpx + Ypx) nas arestas nas quais a sombra deve ser exibida.

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

Isso funciona do meu lado. Espero que ajude você.

SOMBRA AGRADÁVEL NO LADO ESQUERDO E DIREITO PARA DIVS, IMAGENS OU CONTEÚDO INTERNO

Para uma boa sombra embutida nos lados direito e esquerdo das imagens ou qualquer outro conteúdo, use-o dessa maneira

*** O z-index: -1 faz um belo truque ao mostrar imagens ou objetos internos com inserções

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

Em algumas situações, você pode ocultar a sombra por outro contêiner. Por exemplo, se houver um DIV acima e abaixo do DIV com a sombra, você poderá usá position: relative; z-index: 1;-lo nos DIVs ao redor.

Somente na horizontal, você pode enganar a sombra da caixa usando o estouro em sua 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;
}

Outra idéia poderia ser a criação de um pseudo-elemento embaçado escuro, eventualmente com transparência para imitar a sombra. Torná-lo com um pouco menos de altura e mais largura ig

Você pode usar 1 div dentro para "apagar" a 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;
}

Você pode jogar com "height:%;" e "largura:%;" para apagar a sombra que você deseja.

Por qualquer motivo, as respostas fornecidas aqui não funcionariam no meu caso. Então, eu fui criativo. Aqui está uma nova solução para você tudo o que usa linear-gradient()no 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>

Embora eu não queira discutir o assunto, essa não é realmente uma "caixa" que você (nós) está tentando formar, então suponho que se possa dizer que box-shadownão fazia sentido, para começar.

Eu tentei copiar o bootstrap shadow-sm apenas no lado direito, aqui está o meu código:

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