移除投射在以下 div 上的底部框阴影

Question

我有：

我有一个导航菜单，每个链接都带有框阴影。

紧靠导航菜单下方的 div 触及链接底部。

盒子阴影的底部打破了我标签式界面的错觉。

我需要的：

我需要防止链接的框阴影投射到以下 div。

我的代码：

ul {
  list-style: outside none none;
  padding:0; margin:0;
}
li {
  display: inline-block;
}
a {
  background-color: grey;
  color: white;
  padding: 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: inline-block;
  text-decoration:none;
  box-shadow: 1px 1px 3px #222;
}
.selected a{
  background-color: blue;
}
div {
  background-color: blue;
  height: 20px;
}

<nav>
  <ul>
    <li class="selected"><a href="#">Home</a>
    </li>
    <li><a href="#">Link 2</a>
    </li>
    <li><a href="#">Link 3</a>
    </li>
  </ul>
</nav>

<div class="divider"></div>

Answer 1

很简单：

只需将 position:relative; 添加到 div

div {
    position: relative; /* add this */
    background-color: blue;
    height: 20px;
}

演示： http://jsfiddle.net/a2wLb1fz/

为什么这样做？

基本上您需要建立堆叠上下文以使用 z-index 使布局分层。

为此，您需要明确定义图层的定位和 z-index。

BUT，因为在你的情况下它只有两层，链接容器和它下面的栏，你可以省略额外的定义，因为在链接下面的栏上定义定位足够了。

这是一个更长的版本，可以为您完成这项工作：

nav {
    position: relative;
    z-index: 1;
}
div {
    position: relative;
    z-index: 2;
    background-color: blue;
    height: 20px;
}

演示 http://jsfiddle.net/a2wLb1fz/1/

移除投射在以下 div 上的底部框阴影

Remove bottom box-shadow being cast on following div

html

css

tabs

box-shadow

我有：

我需要的：

我的代码：