html/css複数のセクションを作成して、シャドウを別のシャドウにドロップする

Question

複数のセクションが次々に配置されています。私の質問があるので、変更される場合がありますセクションの数が

私の現在の考えは

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を自動的に何らかの形で設定するか、まったく異なる方法でシャドウを作成しますか？

Answer 1

html/cssで行うことは不可能です。

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

とCSS：それは、JavaScriptや擬似要素を使用せずに、実際に可能だ

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

Answer 2

しかし、あなたは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>