Bootstrap 导航栏中的重叠阴影。那很糟

Question

在 Bootstrap 导航栏中，我正在尝试创建两个投影相互交叉的项目。 http://codepen.io/anon/pen/gaEJWY

目前看起来是这样的：

但我希望它看起来像这样：

有人知道如何做到这一点（最好使用 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>

非常感谢！

Answer 1

您可以创建一个伪元素，它位于您的圆圈后面，颜色和高度与导航栏相同。

您必须对定位进行计算，但它有效。

.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

Bootstrap 导航栏中的重叠阴影。那很糟

Overlapping Dropshadow in Bootstrap Navbar. That's bad

css

frontend

nav

twitter-bootstrap