スポンサーリンク
スポンサーリンク

ボックスに影をつける

CSS

ボックスに影を付ける時に使用するのが
「box-shadow」プロパティです。
これの値に影の距離やぼかしの距離、影の広がりの
数値を設定します。

それぞれの値は、半角スペースで区切ります。
水平方向・垂直方向以外の2つの影の距離以外は
書かなくても大丈夫です。

影の広がりをせってしたい場合、ぼかしの距離が不要な場合は
省略することができず、「0px」と書かなけばなりません。

影の距離をプラスにすると、水平方向の場合は右に、
垂直方向の場合は下に影ができます。マイナスに
するとそれぞれ逆の方向に影ができます。

内容
水平方向の距離(px)
垂直方向の距離(px)
ぼかしの距離(px)
影の広がり(px)
影の色(カラーコード)
inset(影を内側に付ける)
ボックスに影を付ける。

設定方法は下記のサンプルコード test.cssの
16行目~30行目をご覧ください。

コメント

タイトルとURLをコピーしました