Question

我正在使用twitter-bootstrap，我有以下代码来生成带阴影的导航栏，基于 this post ：

这是一个有效的小提琴1：http://jsfiddle.net/X4drb/15/

但如果我尝试使用effect2，则不会显示阴影：http://jsfiddle.net/X4drb/16/

CSS

/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

HTML

<nav class="navbar navbar-default effect1">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  <i class="fa fa-bars"></i>
            </button> <a class="navbar-brand" href="index.html"><img src="http://placehold.it/30x30&text=logo" ></a>

        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Hello</a>
                </li>
                <li><a href="#">Stack</a>
                </li>
                <li><a href="#">Overflow</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

为什么第一个效果完美，第二个不起作用？我错过了什么？你有任何想法吗？

Answer 1

尺寸非常小的菜单可显示阴影。在样式中，您需要更改bottom上的值，直到看到阴影并为display:block添加.effect2:before, .effect2:after

如何更改twitter-bootstrap导航栏的盒子阴影？

1 个答案: