如何遮住箱子阴影？

Question

我目前有一个我想在CSS中重新创建的标签图片，但是我在掩盖内容div的框阴影方面遇到了一些困难。

这就是我目前对CSS的看法，并想知道如何让tab div覆盖内容div的盒子阴影？我认为z-index可以解决问题，但阴影仍然可见。

    .sectionTab
{
    margin: 0px;
    padding-top: 7px;
    text-align: center;
    box-shadow: 0px -3px 5px #a6a6a6;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    z-index: 1;
}

.sectionContent
{
    margin: 0;
    padding: 15px;
    box-shadow: 0px -3px 5px #a6a6a6;
    z-index: 0;
}

这是html：

    <div class="sectionTab row span2">
    <h3>Tab title</h3>
</div>
<br /><br />
<div class="sectionContent span3">
        Regular text<br />
        <a href="#">Regular link</a>
        <span rel="tooltip" title="SIC Code Warning" class="ktIcon ktWarningOn"></span>
        <span rel="tooltip" title="ktWarningOff" class="ktIcon ktWarningOff"></span><br /><br />
        <input type="button" class="btn ktButton" value="Button" />
</div>

到目前为止，这是我最终的结果：

Answer 1

选项卡的背景是合适的。否则它是透明的。

所以这个：

.sectionTab
{
    margin: 10px 0 0 10px;
    padding-top: 7px;
    text-align: center;
    box-shadow: 0px -3px 5px #a6a6a6;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    z-index: 1;
    width: 100px;
    position: absolute;
    background: #fff;
}

.sectionContent
{
    margin: 0;
    padding: 15px;
    box-shadow: 0px -3px 5px #a6a6a6;
    z-index: -1;
    position: absolute;
    width: 300px;
    top: 30px;
}​

请参阅此处的工作示例：http://jsfiddle.net/cdk4H/1/