如何使用z-index分层框阴影? [英] How to layer box-shadows using z-index?

问题描述

codepen

#b {
  background: orange;
  box-shadow: 0 0 10px black;
  z-index: 2;
  position: relative;
}

#c {
  background: red;
  z-index: 1;
  position: relative;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1;
  position: relative;
}

li {
  display: inline-block;
  padding: 2px 5px;
}

.current {
  background-color: orange;
  z-index: 3;
  position: relative;
}

#d {
  box-shadow: 0 0 10px black;
  z-index: 2;
}

<div id="a">
  <div id="b">bbb</div>
  <div id="c">
    <ul>
      <li>a</li>
      <li class="current">b</li>
      <li>c</li>
      <li>d</li>
    </ul>
  </div>
</div>
<div id="d">dddd
</div>

看一下密码笔.除了我希望"b"选项卡位于由上面的橙色div引起的框阴影上方之外，我已经或多或少有了所需的图层.

Take a look at the code pen. I've got the layers more or less how I want it, except I want the "b" tab to be above the box-shadow caused by the orange div above.

要详细说明，橙色#b div应该在红色#c div上投射阴影，.current选项卡应该与橙色#b div齐平(上面没有阴影)，而完全不应该在#c上蒙上阴影.

To elaborate, the orange #b div should cast a shadow on the red #c div, the .current tab should appear flush with the orange #b div (have no shadow on it), and #d should not cast a shadow on #c at all.

问题是.current上的z-index似乎不起作用.

The problem is that the z-index on .current doesn't seem to work.

推荐答案

演示:有关z-index和堆栈上下文以及优先级的更多信息，请参见我的回答

For more info on z-index and stacking context and the priorities please see my answer here.

以上内容，与box-shadow组合的inset

插图

如果未指定(默认值)，则阴影被认为是投影阴影(就像将框抬高到内容上方一样). inset关键字的存在将阴影在框架内更改为一个阴影(就像在框内按下内容一样). 在边框上方(甚至透明的边框)内绘制了插入阴影. 背景，但低于内容.

If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.

还有一个negative spread

传播半径

这是第四个值.正值将导致阴影扩大并变大，负值将导致阴影 阴影缩小.如果未指定，它将为0(阴影与元素的大小相同).

This is a fourth value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

(均在此处)

会给您想要的效果.

因此，您将需要更改将阴影应用于元素的位置.

So you will need to change the place that the shadows are applied on elements.

最后的CSS:

   #b {
      background: orange;
      z-index: 2;
      position: relative;
    }
    
    #c {
      background: red;
      -webkit-box-shadow: inset 0 10px 10px -10px black;
      -moz-box-shadow: inset 0 10px 10px -10px black;
      box-shadow: inset 0 10px 10px -10px black;
      z-index: 1;
      position: relative;
    }
    
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      z-index: 1;
      position: relative;
    }
    li {
      display: inline-block;
      padding: 2px 5px;
    }
    
    .current {
      background-color: orange;
      z-index: 3;
      position: relative;
    }
    
    #d {
      box-shadow: 0 0 10px black;
      z-index: 2;
    }

<div id="a">
  <div id="b">bbb</div>
  <div id="c">
    <ul>
      <li>a</li>
      <li class="current">b</li>
      <li>c</li>
      <li>d</li>
    </ul>
  </div>
</div>
<div id="d">dddd
</div>

这篇关于如何使用z-index分层框阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！