ボックスの影を指定する

box-shadow

{ 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;
}