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上的顶部阴影，使其看起来像一个阴影围绕着该组。虽然这很有效，但是阴影相遇的部分却具有奇怪的气质效果。所以这种方法有效，但看起来不太好。 Link to answer describing solution
使用等于模糊的负数的展开，然后使用3个阴影，#list的每一个。理论上很好，但实际上是阴影双方现在都没有全力以赴。 Link to answer describing solution。这是我jsfiddle的尝试。
使用:before或:after伪元素来掩盖重叠的阴影。这对于类似颜色的框非常有效，但我的{{1 }}和ul中包含的内容无法承保！ Link to answer describing solution

我留下了一些果酱，因为我真的很喜欢div和#box周围的阴影，但似乎无法找到适用于我特定情况的解决方案。任何建议都会非常有用！

注意：我实际上正在使用Electron框架，因此解决方案必须在Chrome上运行，但仅必须处理铬！

Answer 1

您可以使用css-filter：

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