html - 在除一侧之外的所有侧创建 CSS3 box-shadow

Question

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

我打算使用 CSS3 的 box-shadow 属性来做到这一点，但我想不出一种方法来只对我想要的部分进行阴影处理。

通常我会用内容区域(更高的 z-index)覆盖打开选项卡的底部阴影，但在这种情况下，内容区域本身有一个阴影，所以会风盖住标签。

标签布局

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

阴影线。

阴影会从水平线上升到垂直线之外。

                _______
               |       |
_______________|       |_________________

Here是一个活生生的例子:

有什么帮助吗，天才？

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 */
}