边境阴影问题

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

喜欢这个吗？

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

太乱了，为什么不试试呢？我刚刚摆脱了: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 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