弧形陰影與背景色

Question

我想要的曲線橫向陰影消失，它的工作原理，但背景顏色會影響到陰影

我有這個網站：

<div class="dcontainer"> 
    <div class="dshadow curva curva-h"> 
    myshadow 
    </div> 
</div> 

這個CSS：

.dcontainer { 
    /*background-color: #f6f6f6;*/ 
    height: 140px; 
} 
.dshadow { 
position:relative; 
float:left; 
width:40%; 
padding:1em; 
margin:2em 10px 4em; 
background:#fff; 
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
} 

.dshadow:before, 
.dshadow:after { 
content:""; 
position:absolute; 
z-index:-2; 
} 

.curva:before { 
top:21px; 
bottom:10px; 
left:0; 
right:50%; 
box-shadow:0 0 15px rgba(0,0,0,0.6); 
border-radius:10px/100px; 
} 

.curva-h:before { 
top:50%; 
bottom:0; 
left:10px; 
right:10px; 
border-radius:100px/10px; 
} 

如果我取消註釋背景色陰影「curva」消失，會發生什麼？ 我不明白...

Answer 1

您需要調整您的容器z-index，使其低於陰影 - DEMO

.dcontainer { 
    background-color: #f6f6f6; 
    height: 140px; 
    position: relative; 
    z-index: -5; 
}