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

我有多个部分放置在一个接一个，他们每个人应该投下一个阴影。部分的金额可能会改变html/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 
} 
...

约10 CSS规则，这种方法存在明显的缺陷，所以我的问题是 - 是否有更优雅的方式来实现这一目标只用HTML/CSS？以某种方式自动设置z-index或以完全不同的方式制作阴影？

来源

2017-10-14 Dmitry D

应用在每个部分中通过伪元件的阴影代替也许？绝对位于顶部，应该具有相同的效果，但不需要处理z轴上的多个图层... – CBroe

这是不可能的通过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); 
}

来源

2017-10-14 22:43:00

不，使用CSS和HTML只是不可能的。 – cyrix

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

只使用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; 
 
}

<div class="wrapper"> 
 
    <div class="section"></div> 
 
    <div class="section"></div> 
 
    <div class="section"></div> 
 
    <div class="section"></div> 
 
</div>

来源

2017-10-14 23:34:17 cyrix

谢谢，这是一个有趣的解决方案 –

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

回答

相关问题