box-shadow プロパティ_html/css_WEB-ITnose

1. 定義と使用法

box-shadow プロパティ ボックスに 1 つ以上の影を追加します。

2. 文法

rree

h-shadow	必須。水平方向の影の位置。負の値も許可されます。
v-shadow	必須。垂直影の位置。負の値も許可されます。
ぼかし	オプション。曖昧な距離。
拡散	オプション。影のサイズ。
カラー	オプション。影の色。
インセット	オプション。外側のシャドウ（アウトセット）を内側のシャドウに変更します。

1. box-shadow:2px 3px 4px #CCC;

/*

Blog Garden

*/

外側の影を持つ要素。影の位置は、x 軸で右に 2 ピクセル、y 軸で下に 3 ピクセルオフセットされ、ぼかしの範囲は 4px です。 Shadow Color #CCC

2。box-shadow:inset 0 -4px #CCC;

内側のシャドウを持つ要素、シャドウの X 軸はオフセットされず、Y は 4 ピクセル上にオフセットされます。 color #CCC

3. 違い

1) 内側の影と外側の影

水平方向の正の値: 右にオフセットします。外側の影は右にオフセットされ、影は右側にあり、内側の影は右にオフセットされ、影は左側にあります。

負の値: 左へのオフセット。外側の影は左にオフセットされ、影は左側にあり、内側の影は左にオフセットされ、影は右側にあります。

垂直 正の値: 下方向のオフセット。外側の影は下にオフセットされ、内側の影は下にオフセットされ、影は上にあります。

負の値: 上向きのオフセット。外側の影は上に移動し、内側の影は上に移動し、影は下に移動します。

2) 影の位置サイズ

3) ぼかし距離

「0」はぼかし効果がないことを意味し、値が大きいほどぼやけます。一定の値に達すると霧になります

4)影のサイズ