如何让两个元素共享一个盒子阴影

Question

所以我处于一个棘手的情况：我有一个外部 div 包装器，其中包含一个内部 div 和一个 ul ，如下所示：

<div id="wrapper">
    <div id="box"></div>
    <ul id="list">...</ul>
</div>

#list 必须绝对定位在 #box 的正下方，但不能在它出现和消失时移动它和页面周围的其他元素。

因为它是绝对定位的，所以如果我在 #wrapper 周围添加边框，它只会围绕 #box。 box-shadow 当然作用相同。问题是，我需要一个无缝围绕两个元素的阴影。

我在搜索 google/Whosebug 时遇到的三个解决方案是：

给两个元素自己的阴影，然后使用 -webkit-clip-path 去掉 #list 上的顶部阴影，让它看起来像一个阴影围绕组。 虽然这有效，但阴影相交的部分有一种奇怪的剪裁效果。所以这个方法有效，但是看起来不太好。 Link to answer describing solution.
使用等于模糊负值的散布，然后使用 3 个阴影，#list 的每一侧各一个。 理论上很好，但实际上两侧的阴影现在不会沿着全长延伸。 Link to answer describing solution. Here's a jsfiddle 个我尝试过。
使用 :before 或 :after 伪元素来掩盖重叠的阴影。 这对于类似颜色的效果非常好箱子，但我的 ul 和 div 里面有无法覆盖的内容！ Link to answer describing solution

我遇到了一些麻烦，因为我真的很想在 #box 和 #list 周围有一个阴影，但似乎找不到适合我的解决方案特殊案例。任何建议都会非常有帮助！

注意：我实际上使用的是 Electron 框架，所以解决方案必须在 Chrome 上工作，但它只有必须在 Chrome!

上工作

Answer 1

您可以使用 css-filter:

#box {
  filter: drop-shadow(0 0 5px black)
}

How to have two elements share a box shadow