Un modo per ottenere box-shadow sui lati sinistro e destro (orizzontale?) Solo senza hack o immagini. Sto usando:

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

Ma dà ombra tutto intorno.

Non ho bordi attorno agli elementi.

NOTA: suggerisco di dare un'occhiata alla risposta di @ Hamish qui sotto; non comporta l'imperfetto "mascheramento" nella soluzione qui descritta.

Puoi avvicinarti con più box-ombre; uno per ogni lato

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/

modificare

Aggiungi altre 2 box-ombre per la parte superiore e inferiore in alto per mascherare ciò che sanguina.

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/

Non ero soddisfatto della parte superiore e inferiore arrotondata all'ombra presente nella soluzione di Deefour, quindi ho creato il mio.

inset box-shadow crea una bella ombra uniforme con la parte superiore e inferiore tagliata.

Per usare questo effetto sui lati dell'elemento, crea due pseudo elementi :beforee :afterposizionati assolutamente sui lati dell'elemento originale.

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>

modificare

A seconda del design, potresti essere in grado di utilizzare clip-path, come mostrato nella risposta di @ Luke. Tuttavia, tieni presente che in molti casi ciò comporta ancora una riduzione dell'ombra in alto e in basso, come puoi vedere in questo esempio:

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>

Prova questo, funziona per me:

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

Approccio classico: diffusione negativa

CSS box-shadow utilizza 4 parametri: h-shadow, v-shadow, blur, spread:

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

La v-shadow (verical shadow) è impostata su 0.

Il parametro sfocatura aggiunge l'effetto gradiente, ma aggiunge anche una piccola ombra sui bordi verticali (quello di cui vogliamo sbarazzarci).

La diffusione negativa riduce l'ombra su tutti i bordi: puoi giocarci cercando di rimuovere quella piccola ombra verticale senza influenzare troppo quella sui lati (è più facile per le piccole ombre, da 5 a 10 pixel).

Ecco un esempio di violino .

Secondo approccio: div assoluto sul lato

Aggiungi un div vuoto nel tuo elemento e modellalo con il posizionamento assoluto in modo che non influisca sul contenuto dell'elemento.

Qui il violino con un esempio di ombra sinistra.

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

Terzo: mascherare l'ombra

Se hai uno sfondo fisso, puoi nascondere l'effetto dell'ombra laterale con due ombre di mascheramento che hanno lo stesso colore dello sfondo e sfocatura = 0, esempio:

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

Ho aggiunto di nuovo uno spread negativo (-3px) all'ombra nera, quindi non si estende oltre gli angoli.

Qui il violino .

Funziona bene per tutti i browser:

-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

Devi usare il multiplo box-shadow;. La proprietà dell'inserto lo rende bello e 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;
}

Un altro modo è con: overflow-y:hiddensul genitore con imbottitura.

#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è ora (2020) il modo migliore che ho trovato per ottenere ombre box su lati specifici di elementi, specialmente quando l'effetto richiesto è un'ombra di "taglio netto" su bordi particolari , in questo modo:

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

... al contrario di un'ombra attenuata / ridotta / assottigliante come questa:

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

È sufficiente applicare il seguente CSS all'elemento in questione:

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

Dove:

• Apx imposta la visibilità dell'ombra per il bordo superiore
• Bpx giusto
• Cpx parte inferiore
• Dpx sinistra

Immettere un valore pari a 0 per tutti i bordi in cui l'ombra deve essere nascosta e un valore negativo (lo stesso del risultato combinato del raggio di sfocatura + valori di diffusione - Xpx + Ypx) per tutti i bordi in cui l'ombra deve essere visualizzata.

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

Funziona dalla mia parte. Spero ti aiuti.

NICE INSET SHADOW SU LATI SINISTRA E DESTRA PER DIV, IMMAGINI O CONTENUTI INTERNI

Per una bella ombra inserita nei lati destro e sinistro delle immagini o di qualsiasi altro contenuto, utilizzalo in questo modo

*** L'indice z: -1 fa un bel trucco quando mostra immagini o oggetti interni con inserti

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

In alcune situazioni è possibile nascondere l'ombra da un altro contenitore. Ad esempio, se è presente un DIV sopra e sotto il DIV con l'ombra, è possibile utilizzare position: relative; z-index: 1;sui DIV circostanti.

Solo per orizzontale, puoi ingannare il box-shadow usando l'overflow sul suo div parent:

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

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

Un'altra idea potrebbe essere quella di creare uno pseudo elemento scuro sfocato alla fine con trasparenza per imitare l'ombra. Fallo con un po 'meno altezza e più larghezza ig

Puoi usare 1 div al suo interno per "cancellare" l'ombra:

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

Puoi giocare con "height:%;" e "larghezza:%;" per cancellare quale ombra vuoi.

Per qualsiasi motivo, le risposte fornite qui non funzionerebbero nel mio caso. Quindi, sono diventato creativo. Ecco una nuova soluzione per te tutto ciò che utilizza linear-gradient()al posto di 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>

Anche se non sto cercando di discutere il punto, questa non è davvero una "scatola" che tu (noi) stai cercando di formare, quindi suppongo che si possa dire che box-shadownon ha senso cominciare.

Ho provato a copiare il bootstrap shadow-sm proprio sul lato destro, ecco il mio codice:

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