ブートストラップタブタブのコンテンツのCSSボックスのシャドウがトップにならない

Question

CSSにドロップシャドーを与えようとしています。 しかし、問題は非常に醜いトップ側です。

は、それが唯一のタブコンテンツの下部に

1. ドロップシャドウを持つことが可能です。
2. トップ側は透明でなければならない。。例のようがない白い箱の事

JSFIDDLE：http://jsfiddle.net/xFW8t/1746/

HTML：

<div class="shadow"> 
     <ul class="nav nav-tabs" id="myTab"> 
      <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li> 
      <li><a data-target="#profile" data-toggle="tab">Profile</a></li> 
      <li><a data-target="#messages" data-toggle="tab">Messages</a></li> 
      <li><a data-target="#settings" data-toggle="tab">Settings</a></li> 
     </ul> 

     <div class="tab-content"> 
      <div class="tab-pane active" id="home"><br><br>Home</div> 
      <div class="tab-pane" id="profile"><br><br>Profile</div> 
      <div class="tab-pane" id="messages"><br><br>Message</div> 
      <div class="tab-pane" id="settings"><br><br>Settings</div> 
     </div> 
     </div> 

Answer 1

移動shadowクラス

<div class="tab-content shadow"> 
     <div class="tab-pane active" id="home"><br><br>Home</div> 
     <div class="tab-pane" id="profile"><br><br>Profile</div> 
     <div class="tab-pane" id="messages"><br><br>Message</div> 
     <div class="tab-pane" id="settings"><br><br>Settings</div> 
    </div> 

tab-contentにチェックデモ：CSSMatic - Shadow Generator：http://jsfiddle.net/xFW8t/1751/

Answer 2

試してみてください。

.shadow { 
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.77); 
    -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.77); 
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.77); 
} 

Answer 3

-webkit-box-shadow: 0px 10px 4px -2px rgba(0,0,0,0.75); 
-moz-box-shadow: 0px 10px 4px -2px rgba(0,0,0,0.75); 
box-shadow: 0px 10px 4px -2px rgba(0,0,0,0.75); 

私は常に次のサイトを使用するCSSの影を作っていたとき。私はあなたが上記のコードで探していると思うものを構築することができました。