我面臨的一個問題是隻能在多個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

相關問題