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

Question

所以我处于一个棘手的情况：我有div一个包含内部div和ul类似的外部包装器：

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

在#list具有绝对定位是正确的下面#box，因为它出现和消失但不动它和其他元素的网页内容。

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

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

给这两个元素自己的阴影，然后使用它-webkit-clip-path来消除上的顶部阴影#list，使其看起来像一个阴影围绕着该组。虽然这有效，但阴影相遇的部分有一种奇怪的剪贴画效果。所以这个方法有效，但看起来不太好。链接到描述解决方案的答案。
使用等于模糊负值的散布，然后使用 3 个阴影，一个用于的每一侧#list。理论上很好，但在实践中，侧面的阴影现在不会沿着整个长度。链接到描述解决方案的答案。这是我尝试的jsfiddle。
使用一个:before或:after伪元素来掩盖重叠的阴影。这对于类似颜色的盒子非常有效，但我的ul和其中的div内容无法覆盖！链接到描述解决方案的答案

我有点陷入困境，因为我真的很喜欢周围#box和#list一起的阴影，但似乎无法找到适合我的特定情况的解决方案。任何建议都会非常有帮助！

注意：我实际上使用的是 Electron 框架，所以该解决方案必须在 Chrome 上运行，但它只需要在 Chrome 上运行！

Answer 1

您可以使用css-filter：

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