在除一个之外的所有边上创建 CSS3 盒子阴影

Question

我有一个选项卡式导航栏，我希望打开的选项卡有一个阴影，以便将其与其他选项卡区分开来。我还希望整个选项卡部分有一个单一的阴影（见底部水平线）向上，阴影除打开的选项卡之外的所有选项卡的底部。

我将使用 CSS3 的 box-shadow 属性来做到这一点，但我想不出一种方法来只对我想要的部分进行着色。

通常我会用内容区域（更高的 z-index ）覆盖打开选项卡的底部阴影，但在这种情况下，内容区域本身有一个阴影，因此最终会覆盖选项卡。

选项卡布局

     _______ _______ _______
    | | | | | |
____|________|__| |__|________|______

阴影线。

阴影将从水平线上升，并从垂直线向外。

                _______
               | |
_______________| |_________________

这 是一个活生生的例子：

有大神帮忙吗？

原文由 bloudermilk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的示例中，使用此样式在 #content 中创建一个 div

 #content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

并更改#content 样式（删除填充）并添加阴影

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

为标签添加阴影：

 #nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}

原文由 Peter 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

用溢出将其切断。

 div div {box-shadow:0 0 5px #000; height:20px}
div {overflow:hidden;height:25px; padding:5px 5px 0 5px}

 <div><div>tab</div></div>

原文由 Kornel 发布，翻译遵循 CC BY-SA 4.0 许可协议