我面临的一个问题是只能在多个div上的左侧和右侧添加一个box-shadow。边框阴影问题

我已经试过这种方法。我想要的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; }

包装具有最大宽度。

来源

2014-01-06 Amit

我只看到左边的阴影和你的'div'在右你的小提琴，是什么问题？ –

小提琴不是我的，我试过那个小提琴，但它不适用于我的上述代码。 – Amit

他们说这个示例小提琴不适用于他们的实现。 – Damien

这太麻烦了，为什么不试试呢？我刚刚摆脱了: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); 
}

来源

2014-01-06 12:21:31

但这不是什么OP要.. – Damien

@Damien我不明白他反正，我只是重构代码 –

看起来像演示2似乎符合法案.. – Damien

喜欢这个？

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

来源

2014-01-06 12:21:46 SW4

试试这个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

来源

2014-01-06 12:26:13 deepak

边框阴影问题

回答

FIDDLE

相关问题