CSSでのbox-shaowの使い方のチュートリアル

影は現実の生活の中で1つの物体のコピーであることができて、CSSの中でもこのようにして、その要素(本当の要素ではありませんて、ページのレイアウトに対していかなる影響がありません)をコピーしたことに相当して、下のコードの中から見ることができます.

.container {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px auto; /*                */
  box-shadow: 0 0 0 0 blue;
}

このとき,実際には幅100 px,高さ100 px青色の正方体が生成されており,現在ではオフセット量を加えることで表示されている. box-shadow: 200px 200px 0 0 blue;に、この影(青い正方体)を元の物体(赤い正方体)に対して200 px右にシフトさせ、200 pxを下にシフトさせると、赤い正方体のコピーが表示されます.
ここで、1番目と2番目のパラメータについても説明したが、1番目のパラメータはx方向のオフセット量(正の値は右オフセット負の値は左オフセット)、2番目のパラメータはy方向のオフセット量(正の値は下オフセット、負の値は上オフセット)である.
次に、4番目のパラメータを見てみましょう.何なのかはさておき、コードをつけて効果を見てみましょう.

.container {
	...
  box-shadow: 0 0 0 10px blue;
}

青色の正方体は赤色の正方体より少し大きく、大きな幅は実は私たちが設定した10 pxであり、4番目のパラメータは元のコピーに基づいてどれだけ拡張されているかを指す.4番目のパラメータは拡張半径と呼ばれ、0より大きい値は元のコピーに基づいて外側に拡張され(つまり大きくなります)、0より小さい値は元のコピーに基づいて内側に拡張されます(つまり小さくなります).
次に、3番目のパラメータを見てみましょう.それとも、コードを使って効果を見ます.

.container {
  ...
  box-shadow: 0 0 10px 20px blue;
}

3番目のパラメータが大きくなるにつれて、シャドウがぼやけた領域は、シャドウの外枠を中心に内外が同時にぼやけ、ぼやけた半径が3番目のパラメータ設定の値であることがわかります.
MDN解釈:これは3番目の値です.値が大きいほど、ブラー面積が大きくなり、シャドウが大きくなるほど薄くなります.負の値は指定できません.既定値は0です.シャドウのエッジが鋭くなります.長くてまっすぐなシャドウエッジの場合、シャドウエッジを中心としたブラー半径のローカル領域をブラーするための遷移色が作成されます.遷移色の範囲は、完全なシャドウカラーから最も外側の終点までの透明です.
5番目のパラメータは色で、あまり言うことはありません.6番目のパラメータはinsetに設定することができます.これはオプションで、デフォルトはこの値を設定しません.
まずMDNの説明を見てみましょう.
inset insetが指定されていない場合、デフォルトのシャドウは枠線の外、すなわちシャドウが外に拡散します.Insetキーワードを使用すると、箱の内部に影が落ち、コンテンツが低く抑えられているように見えます.透明な枠線でも枠内、背景の上、内容の下にシャドウが表示されます.
次に、動的調整コードで説明します.
上図から,拡張半径を調整すると,拡張半径が大きくなるにつれて原物体(赤色の正方体)は徐々に減少し,拡張方向は内側に向かうことが分かった.
ぼかし半径を調整すると、元の物体の枠線を中心に両側にぼかし、ぼかし半径は3番目のパラメータ設定の値です.
今問題がありますが、borderを使って1 pxの枠を描かないのはどうすればいいですか?box-shadowで実現できます.

.container {
  box-shadow: 0 0 0 1px blue;
}

よく言われるように、1つの要素が様々な不思議なスタイルを実現するのは一般的にbox-shadowで作られています.
このチリン猫を見てみましょう.
box-shadowの役割

は立体感を作り出し、例えばあるボタンを懸濁のようにすることができ、例えば私のブログ園のホームページの知っているボタンのようにすることができます.

は幅のない枠線として機能します.borderを使用して枠線を設定するには、レイアウト時に枠線の幅を考慮する必要がありますが、shadow-boxを使用して設定する枠線は必要ありません.シャドウはもともと仮想的で、具体的な要素ではありませんので、レイアウト時にはまったく考慮されません.

の特殊な効果は、例えば1つの要素だけを利用してbox-shadowを何度も通過する方法で、多くの奇妙な図形を作り、いくつかの描きにくい場所に対して1つ1つの点を利用してつなぎ合わせることができ、例えば猫のひげを刺すことができます.しかし、特に多くのshadow-boxを利用すれば、性能はあまりよくありません.

完、不適切な点があれば、指摘を歓迎します.