CSS2.1: box-shadow_html/css_WEB-ITnose の興味深い非定型アプリケーション シナリオ

最近、CSS にとても興味があります。スタイル シートの知的原則は見落とされやすく、非常に単純に見えるため、さらに忘れやすくなります。だから、それを書き留めてください~ box-shadow これは非常に単純に見えます、それはただの影です!しかし、どうやって使うのでしょうか？それは魔法のルールですか？さあ、私と一緒に学びに来てください。まずは面白いアプリを見てみましょう〜 月の中の影がbox-shadowで描かれており、とても幻想的です。

box-shadow Circle.png

真ん中の円は次の 2 つで描画されます

1. 1 つの div を絶対配置します ( .moon:after)
2. 境界線の半径と背景色の設定

   <style type="text/css"> .moon { position: relative; } .moon:after {      content: '';      display: block;          position: absolute;      width: 50px;      height:50px;      border-radius: 50%;      background: rgba(0, 0, 0, 0.1);      //其他的小圆(用box-shadow)... }</style>

および 他のすべての円は 回目の A ラウンドに基づいていますbox-shadow、コードを見てください:

<style type="text/css">     .moon { position: relative; }     .moon:after {          //其他的小圆(用box-shadow)...          box-shadow: 120px 80px 0 2px rgba(0, 0, 0, 0.1),                      100px -60px 0 -7px rgba(0, 0, 0, 0.1),                      -70px 40px 0 -14px rgba(0, 0, 0, 0.1),                        -20px -50px 0 -15px rgba(0, 0, 0, 0.1),                      -20px 120px 0 -15px rgba(0, 0, 0, 0.1),                      50px 50px 0 -15px rgba(0, 0, 0, 0.1);     }</style>

手がかりが見えますか?確かに6つの円は影ですが、重要なのは誰の影であるかです。最初の円.月:後の影です!影とは何ですか? の影は、元の要素 (影) と同じ形状とサイズを持つオブジェクト です。 は の一部を超えています。元の要素が削除され、シャドウ効果が発生します。すると、box-shadow 以降の 6 つの文が 6 つの影に対応し、このシーンのパフォーマンスは 6 つの円になります。構文を分析しましょう~

box-shadow: 120px 80px 0 2px rgba(0, 0, 0, 0.1),

最初の 2 つのパラメータ 120px 80px は、元の要素に対して相対的に配置されます。これらの 2 つのパラメータが 0px 0px の場合、オフセットなしで元の要素と一致します。もうシャドウ効果はありません。 3 番目のパラメータ 0 は、ブラー半径が 0、つまりブラーがないことを意味します。この値は負の数にはなりません。 4 番目のパラメータは 2px で、これは拡張半径です。つまり、この値が設定されていない場合は、デフォルトで 0 になります。このとき、影は元の要素とまったく同じサイズになります。拡張半径が正の数値の場合、数値が大きいほど、拡大半径も大きくなります。影の部分は元の要素よりも大きく出ていると考えられます。したがって、このパラメータ を使用して、影の円 のサイズを制御できます。最後のパラメータcolorは言うまでもなく影の色ですよ～！