box-shadow

仕様

初期値	none
適用対象	すべての要素
値の継承	しない

設定できる値

スペース区切りで
<左右の距離> <上下の距離> <影のぼかし> <影の広がり> <影の色> <inset>
を指定する。
<影のぼかし> <影の広がり> <影の色> <inset>は省略可です。

box-shadow:	15px	15px	20px	5px	rgba(0, 0, 0, 0.8);
	<左右の距離>	<上下の距離>	<影のぼかし>	<影の広がり>	<影の色>

<左右の距離>

ボックスエレメントを起点に正の数の場合は右へ、負の数の場合は左へずれてシャドウを表示します。

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8);

<上下の距離>

ボックスエレメントを起点に正の数の場合は下へ、負の数の場合は上へずれてシャドウを表示します。

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8);

<影のぼかし>

省略可能な値（省略した場合は「0」を設定したのと同じ見た目になります）

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8);

<影の広がり>

省略可能な値（省略した場合は「0」を設定したのと同じ見た目になります）

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8);

<影の色>

省略可能な値（省略した場合は黒色の影ができます）

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8);

<inset>

insetを省略した場合はボックスエレメントの外側に影が付き、
inset指定した場合はボックスエレメントの内側に影が付きます。

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8) inset;