CSS3でボックスにドロップシャドウ

CSS3を使ってボックスにドロップシャドウをかけたい場合、
基本的には以下のような記述になります。
W3C CSS3準拠のwebkit系（Safari, Chrome）とMozzilea系（Firefox）に分けての記述です。

Safari3など用のwebkit（W3C CSS3準拠）に対する記述

-webkit-box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;

FirefoxなどMozilla系ブラウザに対する記述

-moz-box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;

CSS3の記述

box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;

表示例は次のようになります。

HTML5＆CSS3辞典

縦方向と横方向にドロップシャドウをかける

縦横ぼかし5pxを指定したドロップシャドウ

5pxのドロップシャドウを指定したボックスです。

-webkit-box-shadow: 5px 5px 5px #CCC;
-moz-box-shadow: 5px 5px 5px #CCC;
box-shadow: 5px 5px 5px #CCC;

縦方向、横方向1方向ににドロップシャドウをかける

横方向0、縦方向2px、ぼかし2pxを指定したドロップシャドウ

2pxのドロップシャドウを指定したボックスです。

-webkit-box-shadow: 0 2px 2px #CCC;
-moz-box-shadow: 0 2px 2px #CCC;
box-shadow: 0 2px 2px #CCC;

横方向2px、縦方向0、ぼかし2pxを指定したドロップシャドウ

2pxのドロップシャドウを指定したボックスです。

-webkit-box-shadow: 2px 0 2px #CCC;
-moz-box-shadow: 2px 0 2px #CCC;
box-shadow: 2px 0 2px #CCC;

基本的な指定では上記のような見え方になります。
1方向だけ指定してもぼかしの分はみ出すので、
CSSをうまく使って指定する必要があります。

IEでも対応させたい場合はCSS3PIE（PIE.htc）を使って対応させるか、
（CSS3PIE（PIE.htc）が効かないと思ったら）
shadow filterなどを使用すれば対応できます。

すぐに使えるスタイルシート標準テクニック
iPhoneアプリケーション開発ガイド

Tweet