基于 z-index like Material 设计的框阴影

Question

我研究 Material 设计有一段时间了，我想重新创建 sheet 的 material 合并在一起，如 this video 中所见。

它看起来很简单，但我无法让阴影发挥作用。假设每个 sheet 的 z-index 为 1。您会认为每个元素的 box-shadow 会落后于另一个元素（因为它们在同一个 z-index 上）但它们实际上堆叠.

我试过将 sheet 和 'shadow' 元素放入一个容器中，并使 sheet 的 z-index 比阴影更高，但是对于多张卡片，阴影仍然出现卡片上方。

所以我的问题是：有没有办法重新创建这些 sheets 合并在一起的阴影总是出现在卡片后面？

感谢阅读！

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>

基于 z-index like Material 设计的框阴影

Box shadow based on z-index like Material Design

css

z-index

shadow

material-design