在一个侧面上创建一个CSS3盒子阴影

Question

我有一个带标签的导航栏，我希望在打开的标签上有一个阴影，以使其与其他标签区分开。我还希望整个选项卡部分上有一个阴影（请参阅底部的水平线），以阴影除打开的所有选项卡的底部。

我将使用CSS3的box-shadow属性来执行此操作，但是我无法找出仅对所需部分进行着色的方法。

通常，我会用内容区域（较高z-index）遮盖打开的选项卡的底部阴影，但是在这种情况下，内容区域本身会带有阴影，以便最终覆盖该选项卡。

标签布局

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

阴影线。

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

                _______
               | |
________________ | | _________________

这是一个实时示例：

天才有什么帮助吗？

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