边框阴影问题 [英] Border shadow issue

问题描述

我正面临一个问题，只能在多个div的左侧和右侧添加一个box-shadow。

I am facing an issue to add a box-shadow only on left and right on multiple divs.

我已经试过这种方法。 这是我想要的一个
示例，但它只适用于一个div，并没有帮助我。

I have tried this method already. This is an example of what I want, but it only works for a single div and did not help me out.

我的代码有几个主要块。 I.e。

My code has several main blocks. I.e.

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

我需要将box阴影添加到主块的CSS代码中

I need to add box shadow to main block css code

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

包装具有完整宽度。

Wrapper has full width.

推荐答案

这太乱了，为什么不试试这个？我刚刚摆脱：之前和：在伪之后。

That's too much mess, why not try this? I just got rid of the :before and :after pseudo as well..

演示

演示2 （多个元素）

Demo 2 (Multiple elements)

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

这篇关于边框阴影问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！