僅在活動狀態下有陰影的選項卡

Question

是否有方法僅通過CSS實現以下類型的陰影？

到目前爲止，我只設法周圍繪製完整的盒陰影而沒有圍繞活動標籤的凹槽：

http://jsfiddle.net/xypjj7uy/1/

HTML：

<div class="box"> 
    <div class="tabs"> 
     <span class="tab active">Bild</span> 
     <span class="tab">Text</span> 
    </div> 
    <div class="content"></div> 
</div> 

CSS：

.box { 
    width: 200px; 
    height: 250px; 
    box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18); 
    margin: 16px; 
} 

.tabs { 
    height: 30px; 
} 

.tab { 
    display: inline-block; 
    width: calc(50% - 2px); 
    height: 30px; 
    text-align: center; 
    line-height: 30px; 
} 

.tab:not(.active) { 
    /* Should be removed in the final solution with correct shadows... */ 
    background-color: rgba(0, 0, 0, 0.18); 
} 

該解決方案無需關注傳統瀏覽器（IE瀏覽器爲<）。

感謝

Answer 1

使用這個CSS

.tab.active { 
    box-shadow: 0 -5px 2.5px 2px rgba(0, 0, 0, 0.18); 
    position: relative; 
    z-index: 99999; 
} 
.tab { 
    background: #fff none repeat scroll 0 0; 
    display: inline-block; 
    height: 30px; 
    line-height: 30px; 

    text-align: center; 
    width: calc(50% - 2px); 

} 

.content { 
    box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18); 
    margin-top: 0; 
    min-height: 50px; 
    position: relative; 
    z-index: 999; 
} 

編輯你的CSS

.box { 
- Remove this- 
    /*box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18); */ 
    height: 250px; 
    margin: 16px; 
    width: 200px; 
}