javascript - bootstrap tabs CSS box shadow on tab-content bottom not top

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 类移动到 tab-content

    <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>

查看演示:http://jsfiddle.net/xFW8t/1751/