css - 像 Material Design 一样基于 z-index 的盒子阴影

Question

我研究 Material Design 有一段时间了，我想重新创建合并在一起的 Material 表，如 this video 中所示。 .

它看起来很简单，但我就是无法让阴影发挥作用。假设每个工作表的 z-index 为 1。您会认为每个元素的框阴影会落在另一个元素后面(因为它们在相同的 z-index 上)但它们实际上堆叠。

我已经尝试将工作表和“阴影”元素放入容器中，并使工作表的 z-index 高于阴影，但是对于多张卡片，阴影仍然出现在卡片上方。

所以我的问题是:有没有一种方法可以重新创建这些工作表，使它们的阴影始终出现在卡片后面？

感谢阅读!

Answer 1

如果你想让阴影显示在所有 4 个边上但不重叠，比如在 div 1 和 2 之间，技巧是使用伪元素。

div {
  position: relative;
  width : 200px;
  height: 100px;
  background-color: #ddd;
  box-shadow: 0px 3px 3px #666;
  text-align: center;
}
div:nth-child(3) {
  margin-top: 20px;
}

div:after {
    content: "";
    left: 2px;
    right: 2px;
    height: 10px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    box-shadow: 0px -1px 3px #aaa;
}

<div>1</div>
<div>2</div>
<div>3</div>