【问题标题】：Setting box-shadow to a group of HTML elements将 box-shadow 设置为一组 HTML 元素
【发布时间】：2015-12-23 04:53:23
【问题描述】：

我有两个元素，它们的位置相互接触。它们在触摸侧具有不同的尺寸/尺寸。它们都需要在下面有阴影。

问题是其中一个阴影总是覆盖它的兄弟元素。我可以玩z-index，但这只是意味着我将选择两者中的哪一个将被兄弟姐妹的阴影覆盖。

如果可以为一组元素添加阴影，那就太好了，在这种情况下，阴影将在组后面呈现，而不会受到任何元素干扰，也不管它们的 z-index 垂直顺序如何。

是否可以在不借助阴影图像的情况下在 CCS3 中实现类似的效果？

【问题讨论】：

标签： css

【解决方案1】：

也许用一个

div:after {

伪元素

http://jsfiddle.net/2P964/

有点像杯子的方法，但它有效:)

【讨论】：

对其进行了一些更改以使其更清晰。 jsfiddle.net/2P964/1 只需要使用 :after 选择器来覆盖阴影
这是一种非常有趣的方法，确实为我指明了正确的方向。 This JSFiddle 显示了我正在使用的更真实的示例。 DIV 是嵌套的。但基本上我能够使用你的技术做到这一点。 确实非常漂亮。

【解决方案2】：

根据我对您的问题的理解，我创建了一个演示。如果有问题，请写在 cmets 中！ Demo Link

【讨论】：

@RobertKoritnik 我已将阴影更新为不同的颜色以使其可见。
好的，你已经添加了一个包含两个元素的容器，并在容器上放置了一个阴影。如果两个元素在触摸侧具有相同的尺寸，那很好，因为它们在分组时仍然占据矩形形状。问题是我的元素在触摸侧有不同的大小，比如this demo。（我已经相应地更新了我的问题）。
@RobertKoritnik 你能再试试同样的演示链接，看看我的方向是否正确。
您是，因为您为两个 DIV 设置了不同的大小。现在你必须在两者上创建一个阴影，这样它们都不会被任何阴影重叠。
@RobertKoritnik 当你说两者都有阴影时，你想要 div 的右侧、左侧和顶部阴影还是只需要右侧和左侧？

【解决方案3】：

另一种方法是使用剪辑：

div {
    display: block;
    box-shadow: 0 0 10px 2px black;
    background-color: #fff;
    background: linear-gradient(180deg, red, white 30px);
}

#one {
    height: 200px;
    width: 200px;
    margin-left: 50px;
    position: relative;
}

#two {
    height: 50px;
    width: 50px;
    margin: 0 0 0 -50px;
    position: absolute;
    clip: rect(-10px, 50px, 100px, -10px);
}

demo

优点：您可以使用 div 的完整范围（如渐变背景所示）
缺点：2 号 div 必须绝对定位才能正常工作（好吧，或者固定；但无论如何没有你想要的任何位置

【讨论】：

有趣。虽然 Chrome 中似乎存在某种故障，因为元素接触的顶部阴影部分似乎有一个很小的间隙。
你是对的，很清楚。有一点，#one 的影子正在“下降”，可以这么说，影子失去了连续性。我不认为这是 Chrome 的问题，而是技术上的失败。但是，我认为它在某些情况下会很有用；并且可能可以修复在该方向设置附加阴影。
也有一个类似但有点颠倒的glitch，也有公认的解决方案。在与您的情况相同的位置，阴影更强。当阴影较暗或传播距离较大时，它会变得更加突出。

【解决方案4】：

如果里面有图片，为什么不放4个div呢？两个用于阴影，然后两个在顶部，坐标相同，没有阴影，只是背景图像

【讨论】：