CSS3のドロップシャドウ(box-shadow)のまとめ

Category CSS　Update 2015.06.23

IE8以下のアクセスが次第に淘汰され、ようやく安心してCSS3のプロパティが利用できるようになりました。

対応ブラウザは下記
Chrome
Internet Explorer 9+
Firefox 3.5+
Safari 3+

box-shadowの設定値は下記になります。

.box {
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);
}

サンプル

水平（横）方向の長さを設定します。1pxにすると右へ -1pxにすると左へシフトします。

垂直（縦）方向の長さを設定します。1pxにすると下へ -1pxにすると上へシフトします。

ぼかしの強さ長さを設定します。0以上（マイナスの値は設定できません）を指定し、値が大きくなる程、ボケが強くなります。

広がり幅を指定します。

色を指定します。RGBaと16進法(#000000等)どちらでも指定出来ます。

影の向きを指定できます。　inset　を指定すると影の向きを内側に指定出来ます。

私がよく指定しているサンプルをご紹介します。

.box {
box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.4);
}

サンプル

.box {
box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);
}

サンプル

.box {
box-shadow: 0 0 6px 1px rgba(0,0,0,0.1) inset;
border:#bbb solid 1px;
}

サンプル

CSS3のドロップシャドウ(box-shadow)のまとめ - [k]id東京都世田谷区　ホームページ制作　[k]id