Проблема с пограничной тенью

Question

У меня возникла проблема с добавлением тени окна только слева и справа на нескольких div.

Я уже пробовал этот метод. This is an example того, что я хочу, но он работает только для одного div и не помогает мне.

Мой код имеет несколько основных блоков. То есть

<div> 
<div class="main"></div> 
</div> 
<div> 
<div class="main"></div> 
</div> 

мне нужно добавить окно тень основной блок кода CSS

.main:before { 
    box-shadow: -15px 0 15px -15px inset; 
    left: -15px; 
} 
.main:after { 
    box-shadow: 15px 0 15px -15px inset; 
    right: -15px; 
} 
.main { width: 980px; max-width: 1200px; margin: 0 auto; position: relative; background:#fff; padding: 0 25px; } 

обертка имеет полную ширину.

Answer 1

Это слишком много беспорядка, почему бы не попробовать это? Я просто избавилась от :before и :after псевдо, а также ..

Demo

Demo 2 (множественные элементы)

div { 
    background: none repeat scroll 0 0 #EEEEEE; 
    height: 100px; 
    margin: 50px; 
    position: relative; 
    width: 100px; 
    box-shadow: 0 10px 0px 0px #eee, 
       0 -10px 0px 0px #eee, 
       10px 0 13px -5px rgba(0, 0, 0, 0.5), 
       -10px 0 13px -5px rgba(0, 0, 0, 0.5); 
} 

Answer 2

как это?

FIDDLE

CSS

.main:before { 
    box-shadow: -15px 0 15px -15px inset; 
    content: " "; 
    height: 100%; 
    left: -15px; 
    position: absolute; 
    top: 0; 
    width: 15px; 
} 
.main:after { 
    box-shadow: 15px 0 15px -15px inset; 
    content: " "; 
    height: 100%; 
    position: absolute; 
    right: -15px; 
    width: 15px; 
} 
.main { 
    background: none repeat scroll 0 0 #EEEEEE; 
    height: 100px; 
    margin: 50px; 
    position: relative; 
    width: 100px; 
} 

Answer 3

Попробуйте CSS

div{margin: 20px; width: 400px; height: 400px; 
-webkit-box-shadow: 4px 2px #222, -4px 0 2px #222; 
-moz-box-shadow: 4px 0 2px #222, -4px 0 2px #222; 
box-shadow: 4px 0 2px #222, -4px 0 2px #222; 
} 

JSFiddle