まず、htmlレイアウトを準備する必要があります。 次のコードを使用します。
<html> <body> <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> </body> </html>
ストライプを作成するには、css3プロパティlinear-gradientを使用します。 IEを除くすべての最新の安定バージョンのブラウザーでサポートされています。 IE10は勾配をサポートしていますが、残念ながらIE10はWindows 8でのみ機能するため、この記事ではIEのサポートについては説明しません。
減衰のある単純な暗いグラデーションは次のようになります。background-image：linear-gradient（rgba（0,0,0,0,0）、rgba（0,0,0,0.1.1）、rgba（0,0,0,0））;
1つのストリップを作成するために、このグラデーションを高さ1ピクセルに「平坦化」し、background-sizeプロパティがこれに役立ちます。 背景サイズのパラメータを設定します：100％1px; ブロックの幅全体と高さ1ピクセルにわたってグラデーションを取得します。 結果はこのコードです：
.container li { background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)); /* 0deg , */ background-repeat: no-repeat; /* , background-size */ background-position: 50% 100%; background-size: 100% 1px; }
しかし、さらに進んで別のストリップを追加してボリュームエフェクトを作成します。 したがって、白になります。
しかし、不運なことに、光のグラデーションと同じ場所に配置することはできません。 背景が異なると不調和に見えるため、2pxストライプを使用しても機能しません。
この場合、別のcss3プロパティであるbackground-originが必要です。 content-box、padding-box、border-boxの3つの値を取ることができます。 このプロパティを使用すると、ブロックのレイアウトに対して背景を配置できます。
暗闇の下にライトストリップを追加するには、まず下部に透明な境界線を追加し（境界線：1pxの透明な透明;）、次にbackground-origin：border-box for gradient;を設定します。
そして最終的に、勾配の組み合わせの後、コードは次のようになります。
.container li { background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25)); background-repeat: no-repeat, no-repeat; background-position: 50% 100%, 50% 100%; background-size: 100% 1px, 100% 1px; background-origin: padding-box, border-box; border-bottom: 1px solid transparent; }
最後に、この種の放射状グラデーションを追加できます。
放射状グラデーション（50％100％、楕円カバー、rgba（0,0,0、0.05）、rgba（0,0,0,0）50％）;
最終バージョンはjsfiddleデモで見ることができます。