有没有一种方法可以仅使用CSS实现以下阴影?
html - 仅在事件状态下具有阴影的选项卡-LMLPHP

到目前为止,我只设法在整个方框周围绘制阴影,而在非活动选项卡周围没有凹槽:

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


该解决方案不需要照顾旧版浏览器(
谢谢

最佳答案

使用此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;
}

关于html - 仅在事件状态下具有阴影的选项卡,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32942575/

10-12 12:58
查看更多