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

Question

我有兴趣制作一个网站，其中 2 个不同大小的 div 元素可以转换阴影，但不会受到其他阴影的影响。

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

所以，正如标题所说，它是怎么做到的？

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

Answer 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/