CSS3

プロパティ

box-shadow

→●、mdn

落影。

box-shadow プロパティは、ボックスに 1 個以上の落影を付与する。プロパティは、影なしを指示する値 none、または いくつかの影を与える［カンマ区切りの値］リストを受容する。後者による影の重なり順は、リスト順に従って、手前から背後になる。

各 影は、［2～4 個の長さ値、色（省略可）、inset キーワード（省略可）］で表現される <shadow> として与えられる。省略された長さ値は 0 にされ、色が省略された場合の既定は color プロパティの値にされる。

<shadow>

＝<color>?
&& [<length>{2} <length[0,∞]>? <length>?]
&& inset?

<color>? ○

影の色を指定する。色が無い場合の既定は currentcolor になる。

開始<SPAN style="border:1px solid red;
 box-shadow:#8f8 10px 10px;
">テスト</SPAN>終了

<length>{2} ○ （1、2番目の<length>）

描かれる影の ボックスからの 横オフセット、縦オフセット を指定する。

開始<SPAN style="border:1px solid red;
 box-shadow:#8f8 5px 10px;
">テスト</SPAN>終了

<length[0,∞]>? ○ （3番目の<length>）

影の ぼかし半径 を指定する。負な値は無効。値 0 は 影の輪郭をくっきりさせ、値を大きくする程、ぼかされる。§ 影のぼかし法を見よ。

開始<SPAN style="border:1px solid red;
 box-shadow:#8f8 10px 10px 0px;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 box-shadow:#8f8 10px 10px 5px;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 box-shadow:#8f8 10px 10px 10px;
">テスト</SPAN>終了

<length>? ○ （4番目の<length>）

影の 拡幅距離 を指定する。［正な値／負な値］は、指定された距離だけ、縦横とも影を［拡げる／狭める］。§ 影の形状 を見よ。

【この距離が両側の総和を表すのか片側の拡幅を表すのか、はっきりしないが、［ § 影の形状 に示される例／実装のふるまい ］は、片側の拡幅を示唆している。】

注記： 内影に対しては、影を拡げる（面積を大きくする）ことは、影でない領域 ─ すなわち、ボックスの内側領域の投影 ─ の形状を狭めることを意味する。

開始<SPAN style="border:1px solid red;
 box-shadow:#8f8 10px 10px 0px 0px;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 box-shadow:#8f8 10px 10px 0px 5px;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 box-shadow:#8f8 10px 10px 5px 5px;
">テスト</SPAN>終了

inset?

このキーワードが与えられた場合、落影は、外影（ボックスが手前に浮かんでいるかのように、キャンバス上に影を落とす）から 内影（ボックスが背後に沈んでいるかのように、キャンバス上に影を落とす）に変更される。

開始<SPAN style="border:1px solid red;
 box-shadow:#8f8 5px 5px inset;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 box-shadow:#8f8 5px 5px 10px inset;
">テスト</SPAN>終了

下の図に、影に対する［拡幅、ぼかし］による効果をデモ：

width: 100px;
height: 100px;
border: 12px solid blue;
background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
            12px 12px  0px  8px rgba(0,0,0,0.4) inset;

テスト