CSS box-shadow

box-shadowはボックスに影を描くCSSプロパティです。このページでは、box-shadowプロパティの使い方とサンプルをご紹介します。

構文

box-shadow: none
box-shadow: [color] horizontal vertical [radius] [inset]
none
ボックスに影を付けない。 
<div style="box-shadow: none">none</div>
none
color
影の色を指定する。影の色を省略すると、黒い影が描かれる。 
<div style="box-shadow: black 4px 4px 4px">black</div>
<div style="box-shadow: gray 4px 4px 4px">gray</div>
<div style="box-shadow: silver 4px 4px 4px">silver</div>
black
gray
silver
horizontal
水平方向のオフセット（影の長さ）を指定する。正の値はボックスの右側に、負の値は左側にオフセットされた影が描かれる。

次に示す単位を利用できる。

単位
単位 意味 説明
em フォントサイズ
rem root em ドキュメントのルート要素のフォントサイズ
cm centimeters 1cm
mm millimeters 1mm
Q 級 (quarter-millimeters) 0.25mm
in inches 1 inch
pc picas 1/6 inch
pt points 1/72 inch
px pixels 1/96 inch
% percent パーセント
vw viewport width ビューポートの幅の1/100
vmin minimum viewport ビューポートの幅または高さで小さい方の1/100
vmax maximum viewport ビューポートの幅または高さで大きい方の1/100
2px
4px
8px
-2px
vertical
垂直方向のオフセット（影の長さ）を指定する。正の値はボックスの下側に、負の値は上側にオフセットされた影が描かれる。

次に示す単位を利用できる。

単位
単位 意味 説明
em フォントサイズ
rem root em ドキュメントのルート要素のフォントサイズ
cm centimeters 1cm
mm millimeters 1mm
Q 級 (quarter-millimeters) 0.25mm
in inches 1 inch
pc picas 1/6 inch
pt points 1/72 inch
px pixels 1/96 inch
% percent パーセント
vw viewport width ビューポートの幅の1/100
vmin minimum viewport ビューポートの幅または高さで小さい方の1/100
vmax maximum viewport ビューポートの幅または高さで大きい方の1/100
2px
4px
8px
-2px
radius
影のぼかし半径を指定する。ぼかし半径を省略すると、影をぼかさない。

次に示す単位を利用できる。

単位
単位 意味 説明
em フォントサイズ
rem root em ドキュメントのルート要素のフォントサイズ
cm centimeters 1cm
mm millimeters 1mm
Q 級 (quarter-millimeters) 0.25mm
in inches 1 inch
pc picas 1/6 inch
pt points 1/72 inch
px pixels 1/96 inch
% percent パーセント
vw viewport width ビューポートの幅の1/100
vmin minimum viewport ビューポートの幅または高さで小さい方の1/100
vmax maximum viewport ビューポートの幅または高さで大きい方の1/100
0
2px
4px
8px
inset
ボックスの内側に影を描く。 
<div style="box-shadow: gray 4px 4px 4px inset">inset</div>
<div style="box-shadow: 4px 4px 4px inset">inset</div>
<div style="box-shadow: 4px 4px inset">inset</div>
inset
inset
inset

初期値

box-shadow プロパティの初期値は none である。

適用対象

全ての要素に対して box-shadow プロパティを適用できる。

継承

親要素に指定した box-shadow は子孫へ継承されない。

関連記事

参考文献

World Wide Web Consortium (2021) CSS Backgrounds and Borders Module Level 3