[英]bootstrap tabs CSS box shadow on tab-content bottom not top
我试图给标签使用CSS阴影。 但是问题是看起来非常难看的顶面。
是否有可能
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 {
-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);
}
将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/
-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 。 我能够使用上面的代码构建我认为您想要的东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.