html - 两个在同一级别上有阴影的 div

Question

我有两个 div 有阴影并且在同一个 z-index 上。

他们目前都在互相投下阴影。

我希望他们都在背景上投射阴影，但不要在彼此身上投射阴影。我该怎么做呢？

Answer 1

您不能有两个具有相同堆叠级别的不同元素。元素总是有不同的堆叠级别。这就是为什么您的第二个元素会影响第一个元素的原因。（如果没有 z-index，DOM 中的外观决定了堆叠级别）

Z-index 仅适用于非静态定位元素（相对，绝对），因此也无济于事。

IMO，如果没有一些小的 css-hacking，您将无法达到您想要的效果（在元素上声明一个非静态位置并结合额外的包装器元素 - 不要在父级上声明 z-index，而仅在子级上声明 -元素）。

例子

但是，如果我错了，请随时纠正我。

Answer 2

使用这个简单的 CSS 技巧，只需创建 pseudoelement :after，将其 z-index 设置为低于 div 并为其添加阴影。以下代码将在每个div. http://jsfiddle.net/on38a8pz/1/上的工作示例。

div {
    position: relative;
}

div:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 30px black;
    z-index: -1;
}