Question

我有一个接一个地放置了多个部分，每个部分都应该在下一个部分上留下阴影。部分数量可能会改变

我目前的想法是创建大约10个CSS规则，如

section {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
section:nth-child(1){
    z-index:10
}
section:nth-child(2) {
    z-index:9
}
...

这种方法有明显的缺陷，所以我的问题是 - 是否有更优雅的方法来实现这个只使用html / css？以某种方式自动设置z-index或以完全不同的方式制作阴影？

Answer 1

实际上可以不使用JavaScript或伪元素。

只需使用ID属性和特定轮播。

transform-style: preserve-3d

.section {
  height: 32px;
  width: 100%;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transform: rotateX(1deg);
}


.wrapper {
  transform: rotateX(-1deg);
  transform-style: preserve-3d;
}

Answer 2

通过html / css无法做到这一点。但你可以使用javascript：

for (var i=$("section").length; i > 1; i++){
    $("section:nth-child(" + i +")").css ({"z-index":i});
}

和css：

section {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

html / css创建多个部分，将阴影一个放在另一个上

2 个答案: