如何更改twitter-bootstrap導航欄的陰影框？

我使用Twitter的引導，我有下面的代碼生成的box-shadow一個導航欄，總部設在this post：如何更改twitter-bootstrap導航欄的陰影框？

這裏是一個工作撥弄EFFECT1：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>

爲什麼第一效果完美的作品，而第二個犯規？我錯過了什麼？你有什麼想法做到這一點？

來源

2014-04-02 harrison4

大小是非常小的菜單來顯示陰影。在樣式中，您需要更改bottom上的值，直到看到陰影併爲添加.effect2:before, .effect2:after

來源

2014-04-02 09:04:42 LifeSoul

恐怕您錯了，請看下面的示例：http://www.paulund.co.uk/創建不同的css3框陰影效果 – harrison4

Сhanged答案。 – LifeSoul

好的，它的工作原理。但我不明白爲什麼在100px的高度下工作，如果小於這個高度則不行。主帖中給出的例子需要什麼樣的底線值？我不想修改高度。謝謝。 – harrison4

如何更改twitter-bootstrap導航欄的陰影框？

回答

相關問題