Question

我一直在关注Material Design一段时间，我希望重新创建合并在一起的材料，如this video所示。

它看起来很简单，但我无法让阴影工作。让我们说每个工作表的z-index为1.你会认为每个元素的box-shadow都会落在另一个元素之后（因为它们在同一个z-index上），但它们实际上是堆叠的。

我已经尝试将纸张和'阴影'元素放在一个容器中并使纸张的z-index高于阴影，但是使用多张卡片时，阴影仍会显示在卡片上方。

所以我的问题是：有没有办法重新制作这些合并在一起的两张纸的影子？

感谢阅读！

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

基于z-index的盒子阴影，如Material Design

1 个答案: