ボックスの影を覆う方法は？

Question

私は現在、CSSで再作成したいタブイメージを持っていますが、コンテンツdivのボックスの影を隠すのにいくつかの問題があります。

これは、私は現在、CSSのために持っているものである、と私はコンテンツの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/