引导选项卡 CSS 框阴影在选项卡内容底部而不是顶部

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

本文关键字：选项 底部 顶部 CSS 阴影      更新时间：2023-09-26

我正在尝试使用 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>

将类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/

尝试：

.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);
}

-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制作阴影时，我总是使用以下站点：CSSMatic - Shadow Generator。我能够使用上面的代码构建我认为您想要的东西。

相关文章：