如何在兩個相鄰的div之間隱藏陰影

Question

我有兩個互相頂部的div（相鄰），他們的展位爲一個單元應該有一個box-shadow。現在上面的div給了我不想要的低位div的影子。我試圖用「z-index：2」來操作它，以獲得更高的排名，但沒有運氣。

我想隱藏上div的底部陰影和隱藏下的div

頂部陰影此外，我不希望陰影摺疊成鄰接面。該兩個div應該是具有一個單元一個陰影

在我的例子在這裏，我已經simpified的HTML

<div class="upper-box" style="width:100px;height:100px;"> 
</div> 
<div class="lower-div" style="width:100px;height:100px;"> 
</div> 

在的jsfiddle的CSS是所有原始和這裏去改變所有的工作。

.upper-box { 
    border-top: 0 none; 
    margin-bottom: 2px; 
    margin-top: -2px; 
    overflow: auto; 
    position: relative; 
    padding-top: 0; 

    /* Expanded panel gets emphasized by a shadow */ 
    box-shadow: 0px 6px 50px 7px rgba(255,255,255,0.75), 
       0px 6px 50px 7px rgba(88,88,88,0.75), 
       0px 6px 50px 7px rgba(88,88,88,0.75), 
       0px 6px 50px 7px rgba(88,88,88,0.75) 
       ; 
    z-index: 3; 
    border-style: solid; 
    border-color: #000000; 
    border-width: 0px; 
    position: relative; 
}  

.lower-div { 
    border-bottom: 0px; 

    box-shadow: 0px 6px 50px 7px rgba(88,88,88,0.75); 
    z-index: 2; 
    border-style: solid; 
    border-color: #000000; 
    border-width: 0px; 
} 

我想隱藏上div的底部陰影和隱藏下的div

頂部陰影此外，我不希望陰影摺疊成鄰接面。該兩個div應該是具有一個單元一個陰影

這裏是我的現場演示

https://jsfiddle.net/y289sdeb/

Answer 1

你可以使用一個僞元素，像這樣

.upper-box { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: white; 
 
} 
 
.lower-div { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: white; 
 
} 
 
.upper-box::after, 
 
.lower-div::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75); 
 
    z-index: -1; 
 
}

<div class="upper-box"> 
 

 
</div> 
 

 
<div class="lower-div"> 
 

 
</div>

根據評論，可以使用包裝

.wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.upper-box { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.lower-div { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.wrapper::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75); 
 
    z-index: -1; 
 
}

<div class="wrapper"> 
 
    
 
    <div class="upper-box"> 
 

 
    </div> 
 

 
    <div class="lower-div"> 
 

 
    </div> 
 
    
 
</div>