CSS3实现Drop-shadow_html/css_WEB-ITnose

box-shdow を使用してクールなドロップシャドウ効果を実現し、CSS3 で変換することができます:

実装手順を以下に記録します。

DOM 構造

本体として div のみが必要で、シャドウは疑似要素の助けを借りて実現できます: before と :after。したがって、DOM 構造は非常に単純です。

<div class="drop-shadow">drop shadow effect</div>

影を追加します

2 つの疑似要素に影を追加します。最初に左側を実行し、後で右側の影を処理します。

.drop-shadow:before, .drop-shadow:after {   content: "";   position: absolute;   z-index: -1;   bottom: 15px;   left: 10px;   width: 50%;   height: 20%;   box-shadow: 0 15px 20px rgba(125, 125, 125, 0.8); }

さて、私たちが見ているのは次のとおりです:

影を調整します

次に、Transform を使用して影の角度を回転させ、より立体的に見えるようにします。

.drop-shadow:before, .drop-shadow:after {   content: "";   position: absolute;   z-index: -1;   bottom: 15px;   left: 10px;   width: 50%;   height: 20%;   box-shadow: 0 15px 20px rgba(125, 125, 125, 0.8);   transform: rotate(-5deg); }

これで片面の制作が完了しました:

影を調整

次に、影の 1 つを右に移動するだけです。

えー

このようにして、左側の影が右に反転され、完了です: