[CSS]ボックスに影を付ける（ドロップシャドウ）CSS のプロパティ「box-shadow」

ボックスに影を付ける（ドロップシャドウ）ことができるCSS3のプロパティがbox-shadowです。

IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあるボタンをCSS だけで表現することもできますので、個人的には使用頻度の高いプロパティです。

box-shadow の記述方法

以下のようにbox-shadowをCSSファイルに記述します。

※ベンダープレフィックスも付けておきます。

box-shadow の値

box-shadow の値は以下のようになります。

1番目	水平方向へぼかし。1px で右方向、-1px で左方向。
2番目	垂直方向へぼかし。1px で下方向。-1px で上方向。
3番目	ぼかしの距離。値が大きくなるとぼかしが強くなります。
4番目	影の広がり。値が大きくなると影の範囲が広くなります。
5番目	色の指定。RGBa や カラーコード（16進法）を使います。
6番目	影の向き。デフォルトでは影は内→外方向です。 insetを指定すると外→内方向へ影の向きが変わります。

指定できる値が多いですが、よく使うのは 1、2番目の「ぼかしの方向」と 3番目の「ぼかしの距離」、5番目の「色」ではないかなと思います。

box-shadow のサンプル

以下、box-shadowを使った簡単なサンプルです。

box-shadow のサンプル1

水平方向、垂直方向ともに5pxと「正」の値なので、影の方向は 右下になります。
ぼかしの距離は10pxにして、やや強めにぼかしを効かせています。
色は#000で真っ黒い影を落としている、という感じです。

box-shadow のサンプル2

今度はinsetでボックスの内側に影を落とします。
※分かりやすいように、ボックスにグラデーションをかけています。

水平方向は0なので、横方向の影は出ません。

ぼかしの距離は1pxでやや気味にして、垂直方向へ2px、色は#fffで下方向に白色の影を出しています。

box-shadow のサンプル3 – カンマ区切りで複数指定

box-shadowの値は、カンマ区切りで複数指定することもできます。

こんな感じ↓で、ボックスの四隅にドロップシャドウを施すことができます。

IE8 以下への対応について

box-shadowはCSS3 のプロパティなので、IE6、IE7、IE8 の下位バージョンのIE では動きません。

どうしても IE下位バージョンでもbox-shadowを使う場合は、PIE.htc か、IE-CSS3.htc の HTC ファイルを使うと実現できます。

text-shadow

box-shadowと似たプロパティに、テキストに影を落とすtext-shadowがあります。

text-shadowについては、別途こちらの記事で紹介していますので、合わせて参考にしてみてください。