我试图在我通过Bootstrap的导航栏添加一个阴影,但我似乎无法弄清楚.也许有人可以指出我正确的方向.我已经看到的有关类似主题的所有其他问题都有令人难以置信的冗长的错误代码的响应,但是必须有一个简单的方法来做,毕竟不是Bootstrap的全部.
这是我的与我的导航相关的HTML：
<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html">eService</a>
<div class="nav-collapse">
<ul class="nav pull-right">
<li><a href="index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Services
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Stage Design & Build</a></li>
<li><a href="#">Event Planning & Management</a></li>
<li><a href="#">Video Production</a></li>
<li><a href="#">Audio Production</a></li>
<li><a href="#">Lighting Production</a></li>
</ul>
</li><!-- dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Events
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Corporate Events</a></li>
<li><a href="#">Civic Events</a></li>
<li><a href="#">Charity Events</a></li>
<li><a href="#">Grand openings</a></li>
<li><a href="#">Concerts</a></li>
</ul>
</li><!-- dropdown -->
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
这是我的与导航栏有关的CSS：
#custom-nav {
-webkit-Box-shadow: 20px 20px 20px #FC0;
-moz-Box-shadow: 20px 20px 20px #FC0;
Box-shadow: 20px 20px 20px #FC0;
z-index:999;
}
我知道,使用目前的px维度,我为我的阴影设置,它将看起来像一个实体块.我计划调整一旦我可以得到这个dang的事情上班.感谢任何帮助或指针.
木瓜爱.
解决方法
在您的css中,将以下内容添加到.navbar类规则中
.navbar {
-webkit-Box-shadow: 0 8px 6px -6px #999;
-moz-Box-shadow: 0 8px 6px -6px #999;
Box-shadow: 0 8px 6px -6px #999;
/* the rest of your styling */
}
编辑
有一个真棒的在线工具来生成盒子影子代码(感谢cssmatic.com的人).您可以调整您的影子的外观,它将生成所需的所有代码以及任何特定的浏览器前缀(webkit,mozilla等).然后,您可以将代码复制到您的css中.
http://www.cssmatic.com/box-shadow
您也可以在同一网站找到其他css效果.
