仅在活动状态下有阴影的选项卡

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; 
}