如何確保子元素不會掩蓋嵌入陰影？

Question

我有一些子元素div元素，我想應用插圖的box-shadow子元素似乎被掩蓋的box-shadow，這裏是一個jfiddle例如： jsFiddle Demo

如果您拿走optn課程中的background-color，您將在其中看到內嵌框陰影，因此我的代碼爲有效。所以問題是，我該如何做到這一點，所以子元素出現在方塊陰影下？

Answer 1

http://jsfiddle.net/wdYpv/3/

移動背景顏色到母體。

Answer 2

您可以添加填充像這樣：http://jsfiddle.net/jalbertbowdenii/wdYpv/2/

Answer 3

如果我理解正確你自己的目標，你已經得到了你的問題的答案。 ;-)取消optn的背景顏色，並將其添加到optn-group。

正如您已經發現的那樣，如果您在懸停或激活時對optn有不同的背景顏色，它仍會超過插入陰影。簡單且可能懶惰的解決方案是不爲這些人修改背景顏色，而是使用文本顏色和其他效果（例如，向下移動1px）。或者，如果您想要邊界半徑，但對於這些特殊情況（懸停，活動），您可以在沒有陰影的情況下生活，只需適當設置邊界半徑即可。

除此之外，不要讓世界讓你思考，因爲我們在CSS中有很棒的新工具，你不能再使用圖像。你真正想要做的事情仍然可以通過圖像更容易完成。

看看許多網頁上的「粉紅剪板」效果，它仍然是用一個或多個透明PNG巧妙地放置。

Answer 4

有同樣的問題，找到一半的解決方案（運作良好，如果你沒有滾動裏面）。

通過將背景放置在：before或：after僞類中並將其設置爲z-index：-1，可以將背景放置在陰影下。它會做背景部分。

但它會產生新的問題：要定位：在元素之前，您需要應用.optn元素「position：relative;」如果你申請「職位：親戚」它將開始在Webkit瀏覽器的圓角下顯示。

如果你沒有滾動內部，你可以通過四捨五入來修復它，如果你想滾動這個內容，那麼你不幸的是不能這樣做。

總之有一個例子：http://jsfiddle.net/qN99W/