box-shadowプロパティは、その名から想像するとおり、ボックスエリアに影をつける（ドロップシャドウ）ことができます。

仕様

外側にドロップシャドウ

box-shadow:右方向 下方向 ぼかし 広がり 色;

内側にドロップシャドウ

box-shadow:右方向 下方向 ぼかし 広がり 色 inset;

外側と内側にドロップシャドウ

box-shadow:右方向 下方向 ぼかし 広がり 色,右方向 下方向 ぼかし 広がり 色 inset;

必須は、右方向 下方向 色。
外側、内側両方設定したい場合は、カンマ（,）区切りで記述します。

サンプル

type1 外側にドロップシャドウ

box-shadow:5px 0 #000;

type2 色にアルファ（透明）指定が可能

box-shadow:5px 0 rgba(0,0,0,0.4);

type3

box-shadow:0 5px rgba(0,0,0,0.4);

type4

box-shadow:5px 5px rgba(0,0,0,0.4);

type5 シャドウをぼかす

box-shadow:5px 5px 5px rgba(0,0,0,0.4);

type6 シャドウを広げる

box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4);

type7 シャドウを左上に

box-shadow:-5px -5px 5px 5px rgba(0,0,0,0.4);

type8 内側にシャドウ

box-shadow:5px 0 rgba(0,0,0,0.4) inset;

type9

box-shadow:0 5px rgba(0,0,0,0.4) inset;

type10

box-shadow:5px 5px rgba(0,0,0,0.4) inset;

type11

box-shadow:5px 5px 5px rgba(0,0,0,0.4) inset;

type12

box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4) inset;

type13

box-shadow:-5px -5px 5px 5px rgba(0,0,0,0.4) inset;

type14 外側と内側にドロップシャドウ

box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4),5px 5px 5px 5px rgba(0,0,0,0.4) inset;

type15

box-shadow:-5px -5px 5px 5px rgba(0,0,0,0.4),-5px -5px 5px 5px rgba(0,0,0,0.4) inset;

Safari4 ではプリフィックス（-webkit-）が必要

type14

box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4),5px 5px 5px 5px rgba(0,0,0,0.4) inset;
-webkit-box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4),5px 5px 5px 5px rgba(0,0,0,0.4) inset;

シャドウ自体の幅と高さは実体には含まれない

と書いてもよく分からないので、実際のサンプルで確認します。

<div style="width:150px;height:120px;border:3px solid #c00;border-radius:10px;box-shadow:5px 5px rgba(0,0,0,0.4);-webkit-box-shadow:5px 5px rgba(0,0,0,0.4);"></div>
<div style="width:150px;height:120px;border:3px solid #c00;border-radius:10px;box-shadow:5px 5px rgba(0,0,0,0.4);-webkit-box-shadow:5px 5px rgba(0,0,0,0.4);"></div>

<div style="width:150px;height:120px;margin:0 0 10px;border:3px solid #c00;border-radius:10px;box-shadow:5px 5px rgba(0,0,0,0.4);-webkit-box-shadow:5px 5px rgba(0,0,0,0.4);"></div>
<div style="width:150px;height:120px;border:3px solid #c00;border-radius:10px;box-shadow:5px 5px rgba(0,0,0,0.4);-webkit-box-shadow:5px 5px rgba(0,0,0,0.4);"></div>

このように、box-shadowを使用して外側にドロップシャドウする場合は、その前後のボックスの余白に気を配る必要があります。

プログレッシブ・エンハンスメント

IE8以下では、box-shadowは適用されません。
とはいえ、シャドウがかからなくても情報は正しく伝わるため、プログレッシブ・エンハンスメントを適用しシャドウが適用されないブラウザは残念、ということでぼくはやり過ごすことにします。

番外：ドロップシャドウと似て非なるborder-style

double

groove

ridge

inset

outset

※border-styleプロパティの値として、ほかにも「none」「hidden」「dotted」「solid」があります。