CSS3：只有沒有父背景的陰影

Question

我有一個CSS3陰影的問題，我以前沒有看過。 它看起來像一個盒子陰影，通過：before和：after選擇器應用於div，只有在div的容器沒有背景色設置的情況下才有可能。

有什麼辦法可以做到這一點嗎？

<div class="container">  
    <div class="shadow-box"> 
     test 
    </div> 
</div> 

.container不得有背景顏色集。我在http://jsfiddle.net/v1utr15n/上創建了一個示例

Answer 1

您需要確保該.container將開始一個新的堆疊順序。您可以通過設置position: relative; z-index: 0或除1之外的不透明度來完成此操作，例如opacity: .9999。

.container { 
 
    background-color: #fff; 
 
    height: 500px; 
 
    position: relative; 
 
    z-index: 0; 
 
} 
 
.shadow-box { 
 
    background-color: #fff; 
 
    position: relative; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
.shadow-box:before, 
 
.shadow-box:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); 
 
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); 
 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); 
 
    top: 50%; 
 
    bottom: 0; 
 
    left: 10px; 
 
    right: 10px; 
 
    -moz-border-radius: 100px/10px; 
 
    border-radius: 100px/10px; 
 
}

<div class="container"> 
 
    <div class="shadow-box"> 
 
    test 
 
    </div> 
 
</div>

對於在z-index和堆疊順序上下文的一些背景信息，請參見http://philipwalton.com/articles/what-no-one-told-you-about-z-index/。

Answer 2

將陰影框的代碼放在陰影框類中，而不是在之前或之後。

網址：http://jsfiddle.net/v1utr15n/1/

.container { 
 
    background-color: #fff; 
 
    height: 500px; 
 
} 
 
.shadow-box { 
 
    background-color: #fff; 
 
    position: relative; 
 
    width: 300px; 
 
    height: 300px; 
 
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 
 
} 
 
.shadow-box:before, 
 
.shadow-box:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 50%; 
 
    bottom: 0; 
 
    left: 10px; 
 
    right: 10px; 
 
    -moz-border-radius: 100px/10px; 
 
    border-radius: 100px/10px; 
 
}

<div class="container"> 
 
    <div class="shadow-box"> 
 
    Shadow box 
 
    </div> 
 
</div>