見やすくするために(かつ、一般的な背景として)、白い背景で表示することにします。
まず、<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>
うまくできました。