css - 将 box-shadow 设置为一组 HTML 元素

Question

我有两个元素被定位以便它们的侧面接触。它们在触摸侧具有不同的尺寸/尺寸。他们两个都需要在下面有一个阴影。

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

如果可以为一组元素添加阴影，那将是很棒的，在这种情况下，阴影将在组后面呈现而没有任何元素干扰并且无论它们的z-index垂直顺序如何。

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

Answer 1

也许使用一个

div:after {

伪元素

http://jsfiddle.net/2P964/

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

Answer 2

另一种方法是使用剪辑：

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);
}

演示

• 优点：您可以使用 div 的全部范围（如渐变背景所示）

• 缺点： 2 号 div 必须绝对定位才能工作（好吧，或者固定；但无论如何都没有你想要的任何位置

Answer 3

根据我对您问题的理解，我创建了一个演示。如果有问题，请在评论中写下！演示链接

Answer 4

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