最終更新日

box-shadowプロパティ

box-shadowは、ボックスに影を付けるプロパティです。

影の設定は、2~4個の長さの値を半角スペースで区切って指定します。

・1個目の値は、水平方向への影の長さを指定。正の値は右方向へ、負の値は左方向への距離(省略不可
・2個目の値は、垂直方向への影の長さを指定。正の値は下方向へ、負の値は上方向への距離(省略不可
・3個目の値は、影のぼかし範囲を指定。値が大きいほど影の端がぼやける(省略可能
・4個目の値は、影の拡張を指定。正の値は影の形を拡張させ、負の値は影の形を収縮させる(省略可能

任意で「色」と「inset」を指定できます。insetを付けると、影がボックスの内側に付きます。色の値は、colorプロパティを参照してください。色の指定を省略するとブラウザの設定色になります。

影の値は、カンマで区切って複数指定することも可能です。その場合は、最初に指定した影の層が一番上に配置され、次の影はそれぞれその下へ順に配置されます。

文字に影をつける場合は、text-shadowを使用します。

CSS3での変更点
・box-shadowは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
none すべての要素 なし
説明
長さの値 影の長さなどを「px」や「em」で指定します。
色の値 色の指定を省略するとブラウザの設定色になります。
inset 影をボックスの内部へ付けます。
none ボックスに影を付けません。(初期値
サンプルコード
box-shadow: 5px 5px;
box-shadow: 5px 5px 5px;
box-shadow: 5px 5px 5px 5px;
box-shadow: 5px 5px 5px 5px #f00;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5) inset;
box-shadow: 5px 5px 5px 5px #f00, 7px 7px 7px 7px #00f;
参考文献:CSS Backgrounds and Borders Module Level 3外部リンク
HOME