見やすくするために（かつ、一般的な背景として）、白い背景で表示することにします。
まず、<div>を使った普通のボックスです。
CSS3のテスト
ソース：
<div style="border:#666 thin solid; width:10em;"> CSS3のテスト</div>
これに、box-shadowを付け加えます。
CSS3のテスト
ソース：
<div style="border:#666 thin solid; width:10em; box-shadow: 5px 5px 5px #aaa;"> CSS3のテスト</div>
box-shadow: （垂直方向の陰サイズ）（水平方向の陰サイズ）（ぼかしレベル）（色）
という定義です。
さらに、
box-shadow: （垂直方向の陰サイズ）（水平方向の陰サイズ）（ぼかしレベル）（ぼかし広がり）（色）
と、指定を加えられます。（ぼかしレベル）を10pxに増加し、（ぼかし広がり）5pxを加えてみます。
CSS3のテスト
ソース：
<div style="border:#666 thin solid; width:10em; box-shadow: 5px 5px 10px 5px #aaa;"> CSS3のテスト</div>
陰の範囲が広がり、ボケの程度が強まりました。
その結果、上辺・左辺も浮き上がって見えるようになったので、ボックスの境界線を無くすこともできそうです。
CSS3のテスト
ソース：
<div style="width:10em; box-shadow: 5px 5px 10px 5px #aaa;"> CSS3のテスト</div>
陰が目立ち過ぎなので、控え目にしてみます。
CSS3のテスト
ソース：
<div style="width:10em; box-shadow: 4px 4px 8px 3px #aaa;"> CSS3のテスト</div>
さて、これまで文字を囲むボックスに陰を付けましたが、画像にも陰が付けられるのでしょうか。
当ブログで使うことを前提に、通常のグレーの背景に戻します。
できました。ソースは次の通りです。
<div style="text-align: center; box-shadow: 10px 4px 8px 3px #666;"><a href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02.jpg" target="_blank"><img border="0" alt="apricot02.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02-thumbnail2.jpg" width="400" height="264"></a></div>
写真らしいイメージにするために、borderで白い縁取りを付けてみます。
ソース：
<div style="text-align: center; box-shadow: 10px 4px 8px 3px #666; border: #fff solid 5px; width:300px;"><a href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02.jpg" target="_blank"><img border="0" alt="apricot02.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02-thumbnail2.jpg" width="300" height="196"></a></div>
ブログのCSSが、記述幅を制限しているので、白の縁取りが横方向へ充分に取れないようです。
では、画像の横幅を狭くしてみます。横方向の陰も小さくします。
ソース：
<div style="text-align: center; box-shadow: 4px 4px 8px 3px #666; border: #fff solid 5px; width:300px;"><a href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02.jpg" target="_blank"><img border="0" alt="apricot02.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02-thumbnail2.jpg" width="300" height="196"><;/a></div>
今までは画像を入れている<div>に陰やborderの指定をしましたが、最後に、画像そのものに指定をしてみたいと思います。
オリジナル画像：
css3で縁取りと陰：
ソース：
<div style="text-align: center"><a class="fancybox-pad8" data-fancybox-group="gallery" href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/thistle_l.jpg" target="_blank"><img style="box-shadow: 4px 4px 8px 3px #666; border: #fff solid 5px;" alt="thistle_s.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/thistle_s.jpg" width="300" height="199"></a></div>
うまくできました。
