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

Question

所以我的处境很棘手：我有一个外部的div包装器，它包含一个内部的div和一个ul，如下所示：

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

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

因为它是绝对定位的，如果我在#包装器周围添加一个边框，它只在#box周围。问题是，我需要一个阴影，可以无缝地围绕两个元素。

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

>

给这两个元素赋予它们自己的阴影，然后使用-webkit clip path去除#list上的顶部阴影，使其看起来像一个阴影环绕着整个组。虽然这是可行的，但阴影相交的部分有一种奇怪的剪贴效果。所以这个方法是可行的，但看起来不太好。链接到描述解决方案的答案。

使用等于模糊负数的扩散，然后使用3个阴影，每个阴影分别对应于#list。理论上很好，但实际上，侧面的阴影现在不会沿着整个长度。链接到描述解决方案的答案。我有一大堆人在尝试。

使用：before或：after伪元素覆盖重叠阴影。这对于类似颜色的盒子非常有效，但是我的ul和div中有无法覆盖的内容！链接到描述解决方案的答案

我陷入了一点困境，因为我真的希望在#box和#list周围有一个阴影，但似乎找不到适合我的特定情况的解决方案。任何建议都会非常有用！

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

Answer 1

您可以使用css过滤器：

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