★CSS3リファレンス

box-shadow …… ボックスに影をつける

box-shadowプロパティは、ボックスに1つまたは複数の影をつける際に使用します。
box-shadowプロパティでは、例えば以下のように影を指定します。

ここをクリック

影は２～４つの長さの値で定義されますが、任意で色、insetキーワードを指定することもできます。
insetキーワードを付けると、影がボックスの外側ではなく内側につくようになります。
長さの指定を省略すると0となり、色の指定を省略するとユーザーエージェントが選んだ色になります。
複数の影を指定する場合には、カンマ（ , ）区切りで影のリストを複数指定します。

影を定義する指定内容は、以下のように解釈されます。

• １番目の長さの値は、水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
• ２番目の長さの値は、垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
• ３番目の長さの値は、ぼかし距離です。負の値を指定することはできません。
  値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
• ４番目の長さの値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。
• 色の値を指定すると、影がその色になります。
• insetキーワードを指定すると、ボックスの外側の影から内側の影に変更されます。

尚、box-shadowプロパティは、::first-letter擬似要素に適用されますが、::first-line擬似要素には適用されません。
また、border-collapse:collapse;が指定されたtable内要素には、外側の影はつきません。

テキストに影をつける場合には、text-shadowプロパティを使用します。

■値

■初期値・適用対象・値の継承

■使用例

■ベンダープレフィックスを付けた場合の使用例