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

Question

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

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

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

由于它是绝对定位的，如果我在#wrapper 周围添加边框，它只会在#box 周围。 box-shadow 当然也一样。问题是，我需要一个能够无缝环绕两个元素的阴影。

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

1. 给两个元素自己的阴影，然后使用-webkit-clip-path 去除#list 上的顶部阴影，使其看起来像一个阴影围绕组。 虽然这工作时，阴影相遇的部分有一种奇怪的剪辑效果。所以这个方法行得通，但看起来不太好。 Link to answer describing solution.

2. 使用等于模糊负值的散布，然后使用 3 个阴影，#list 的每一侧各一个。 理论上不错，但实际上是两侧的阴影现在不要沿着全长走。 Link to answer describing solution。这是我尝试的jsfiddle。

3. 使用: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)
}