demo

Question

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

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

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

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

Answer 1

也许使用

div:after {

伪元素

http://jsfiddle.net/2P964/

一个杯子方法，但它的工作原理:)）

Answer 2

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

Answer 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的全部范围（由渐变背景去除）
缺点：div 2必须绝对定位才能工作（好，或固定;但无论如何都没有你想要的任何位置

Answer 4

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

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

4 个答案:

demo