{ box-shadow 【 ボックス・シャドウ 】 : 長さ ぼかし半径 広がり 色 固定値; }

box-shadowプロパティは、ボックスの影を表現します。

初期値	none
継承	なし
適用される要素	すべての要素
モジュール	CSS Backgrounds and Borders Module Level 3

値の指定方法

長さ

任意の数値＋単位	単位付きの数値で指定します。水平、垂直方向の値を半角スペースで区切って記述します。正の値は右下、負の値は左上方向です。

CSSにおける単位付きの数値の指定方法

ぼかし半径

任意の数値＋単位	単位付きの数値で指定します。負の値は指定できません。

広がり

任意の数値＋単位	単位付きの数値で指定します。負の値は影の形が収縮します。

色

色	キーワードまたはカラーコードで指定します。

CSSにおける色の指定方法

固定値

none	影を表示しません。この場合、他の値は指定しません。
inset	ボックスの内側に影が表示されます。

サンプルコード

.box{
  width: 400px; height: 150px; border: solid 1px red;
  box-shadow: 2px 5px 10px 1px red;
}