[英]How to change the box-shadow of twitter-bootstrap navbar?
我正在使用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>
為什么第一個效果完美,而第二個效果不完美? 我想念什么? 你有什么想法嗎?
尺寸很小的菜單顯示陰影。 在樣式中,您需要更改bottom
的值,直到看到陰影並為.effect2:before, .effect2:after
添加display:block
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.