使用 Bootstrap 将阴影添加到顶部固定的导航栏

Question

我试图通过 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 尺寸，它将看起来像一个实心块。我打算在我能让这该死的东西工作后进行调整。感谢您的帮助或指点。

大爱。

原文由 Brian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的 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 效果。

原文由 moeabdol 发布，翻译遵循 CC BY-SA 3.0 许可协议