Bootstrap導航欄中的重疊Dropshadow。這很糟糕

在Bootstrap導航欄中，我試圖創建兩個陰影相互交叉的項目。 http://codepen.io/anon/pen/gaEJWY Bootstrap導航欄中的重疊Dropshadow。這很糟糕

目前，它看起來像這樣：

但我希望它看起來像這樣：

人有一個想法如何做到這一點（使用CSS最好）？

.navbar-inner { 
 
    box-shadow: 0px 4px 8px #888888; 
 
} 
 

 
.navbar-brand { 
 
    background: #F8F8F8; 
 
    width: 160px; 
 
    height: 160px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    box-shadow: 0px 10px 8px #888888; 
 
    margin-top: -25px; 
 
    padding-top: 29px; 
 
    padding-left: 29px; 
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 

 
    <!-- Always force latest IE rendering engine or request Chrome Frame --> 
 
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> 
 

 
    <!-- Use title if it's in the page YAML frontmatter --> 
 
    <title>My Product</title> 
 

 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> 
 
    <link href="/stylesheets/all.css" rel="stylesheet" /> 
 
    <script src="/javascripts/all.js"></script> 
 
    </head> 
 

 
    <body> 
 

 
    <nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="navbar-inner"> 
 
     <div class="container"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#"> 
 
      <img src="//placehold.it/100x100"> 
 
      </a> 
 
     </div> 
 

 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">Store Locator</a></li> 
 
      <li><a href="#">Share</a></li> 
 
      <li><a href="#">Cocktails</a></li> 
 
      <li><a href="#">Shop</a></li> 
 
      <li><a href="#">Blog</a></li> 
 
      </ul> 
 
     </div><!-- /.navbar-collapse --> 
 
     </div><!-- /.container-fluid --> 
 
    </div> 
 
    </nav> 
 

 

 
    <!--<div class="container">--> 
 
    <!--<img src="images/header-video.jpg">--> 
 
<!--</div>--> 
 

 
    </body> 
 
</html>

非常感謝！

來源

2015-11-19 Hairgami_Master

您可以使用與導航欄相同的顏色和高度創建一個僞元素，該元素將位於您的圓圈後面。

你必須做的定位數學，但它的作品。

.navbar-brand:before{ 
    /* bigger than the circle to mask the shadow 1*/ 
    width:200px; 
    /* same height as navbar */ 
    height:50px; 
    content:"."; 
    overflow:hidden; 
    text-indent:99999px; 
    display:block; 
    background: #F8F8F8; 
    position: absolute; 
    /* cause your div has margin -25px */ 
    top:25px; 
    /* so it will mask everything on the sides */ 
    left:-15px; 
} 
.navbar-brand > * { 
    /* everything inside the navbar brand need to have its positioning set */ 
    position: relative; 
}

Pen

來源

2015-11-19 20:46:20 teefars

真棒的感謝！我會等一天，看看有沒有人想出更好的東西，但這是一個很棒的解決方案。謝謝！ –

再次感謝@teefars我很欣賞你的想法。 –

不客氣:) – teefars

Bootstrap導航欄中的重疊Dropshadow。這很糟糕

回答

相關問題