如何防止一个 div 元素被另一个 div 元素的 box-shadow 影响？答案

【问题标题】：How to prevent a div element to be affected by the box-shadow of another div element?如何防止一个 div 元素被另一个 div 元素的 box-shadow 影响？
【发布时间】：2016-07-19 23:05:37
【问题描述】：

我有兴趣制作一个网站，让 2 个不同大小的 div 元素投射阴影，但不受其他阴影的影响。

我尝试在两个元素中放置相同的 z-index，但最后一个优先于第一个，并且它的阴影与它重叠。

那么，正如标题所说，如何做到呢？

编辑：我已阅读 Two divs with shadows looks like one part. Is it possible in CSS? 帖子，但这并不能解决我的问题，因为我无法移动任何像素的阴影。

【问题讨论】：

一个选项是使用第一个选项，然后在与第一个选项相同的位置添加另一个蓝色框，但没有阴影，并且 z-index 更高。
Two divs with shadows looks like one part. Is it possible in CSS?的可能重复
“我不能移动任何像素的阴影”是什么意思？
我正在使用 JavaScript 来处理一些动态阴影，我的意思是，必须像这样设置，不要偏移它。

标签： html css

【解决方案1】：

你可以省略绿色框的左侧阴影，或者类似的。

.div2 {
  background:#B1FA00;
  width:200px;
  height:50px;
  float:left;
  box-shadow: 0 0 0 gray, 
       0 0 0 transparent, 8px 8px 15px gray;
}

例子：

https://jsfiddle.net/b1483vuk/1/

两个 div 均为白色的示例：

https://jsfiddle.net/b1483vuk/2/

【讨论】：

看起来确实不错，但是如果两个 div 元素的颜色相同（例如白色），你仍然可以看到阴影，所以它不能解决我的问题，对不起
嗯。我刚刚用两个 div 都是白色的第二个 jsfiddle 更新了我的答案。似乎在我的机器（Chrome）上工作正常。我只需要将阴影的偏移量向右调整两个像素。
我使用的是 Firefox，它使用的阴影比 Chrome 更大，这可能就是原因。

【解决方案2】：

如果将 box-shadow 移动到每个框的伪元素上，则可以使用 z-index 将伪元素定位在两个框的后面。

css 看起来像：

div {
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 12px black;
  z-index: -1;
}

它可能不适用于您的情况，但下面的小提琴证明了这一点：

https://jsfiddle.net/adrianlynch/16r8bp5a/

【讨论】：

【解决方案3】：

如@0b10011 所说，用:before 掩盖它：

<style type="text/css">
#two {
    position:relative; /* Add relative positioning */
}
/* Add :before element to cover up shadow */
#two:before {
    background:white;
    display:block;
    content:".";
    font-size:0;
    width:4px; /* Width of Shadow */
    height:100px; /* Height of #one */
    position:absolute;
    left:-4px; /* 0 - Width of Shadow */
    top:0;
}
</style>

【讨论】：

但是影子盒在哪里？
把它放在两个 div 元素中

【解决方案4】：

尝试偏移阴影，以便隔离绿色矩形的左侧，并将其 z-index 设置为更好。

试试这样的。

box-shadow: 10px 0px 0px 10px #888888;

代码笔： http://codepen.io/danielsinger/pen/grvJGw

【讨论】：

我提到的帖子解释了如何抵消阴影，但我无法抵消它们。我正在寻找替代方案。

【解决方案5】：

@jcaron 的评论解决了我的问题：

一个选项是使用第一个选项，然后在与第一个选项相同的位置添加另一个蓝色框，但没有阴影，并且 z-index 更高。

感谢大家的支持。

【讨论】：

【解决方案6】：

有一个简单的解决方案，只需使用 z-index 并将一个 div 覆盖在另一个上。您会注意到黄色和绿色之间连接处的阴影略微变厚，这是由于 div 阴影重叠造成的，据我所知（不是很远），这是不可避免的。

.a1 {
        z-index:5;
        width:50px;
        height:100px;
        box-shadow: 0 0 5px 3px black;
        position:absolute;
        top:50px;
        left:20px;
        background-color:white;
      }
      .a11 {
        z-index:10;
        width:50px;
        height:100px;
        position:absolute;
        top:50px;
        left:20px;
        background-color:yellow;
      }
      .a2 {
        z-index:8;
        width:100px;
        height:50px;
        box-shadow: 0 0 5px 3px black;
        position:absolute;
        top:100px;
        left:70px;
        background-color:green;
      }

<html>
  <body>
    <div class=a1></div>
    <div class=a11></div>
    <div class=a2></div>
  </body>
</html>

【讨论】：