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製作多個部分，將一個陰影放在另一個上

回答

相關問題