box-shadowプロパティ

プロパティbox-shadowはブロックに影を設定します。値として、プロパティはスペースで区切られた6つのパラメータ、または影を完全に解除するキーワードnoneを受け取ります。

構文

cssセレクタ {
  box-shadow: inset X軸方向のオフセット Y軸方向のオフセット ぼかし 影のサイズ 色;
}

cssセレクタ {
  box-shadow: none;
}

パラメータ	説明
`inset`	オプションパラメータ。指定すると影はコンテナの内側に、指定しないと外側になります。
X軸方向のオフセット	X軸方向の影のオフセットを指定します。正の値は右に、負の値は左に移動します。
Y軸方向のオフセット	Y軸方向の影のオフセットを指定します。正の値は下に、負の値は上に移動します。
ぼかし	影のぼかしを指定します。値が大きいほど、影はよりぼやけます。オプションパラメータ。指定しない場合、影はシャープになります。
影のサイズ	影のサイズを指定します。正の値は影を拡大し、負の値は逆に縮小します。オプションパラメータ。指定しない場合、影は要素と同じサイズになります。
色	あらゆる色の単位で影の色を指定します。オプションパラメータ。指定しない場合、影の色はテキストの色と同じになります。

X軸、Y軸方向のオフセット、ぼかし、影のサイズは、パーセントを除くあらゆるサイズの単位で指定できます。

この例では、影は下と右に移動し、わずかなぼかしが追加されています：

html<div id="elem"></div>

css#elem {
  box-shadow: 5px 5px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

この例では、影は下と右に移動していますが、ぼかしはありません（影はシャープになります）：

html<div id="elem"></div>

css#elem {
  box-shadow: 2px 2px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

この例では、影は移動していませんが、ぼかしが追加されています：

html<div id="elem"></div>

css#elem {
  box-shadow: 0px 0px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

この例では、影は移動しておらず、ぼかしはゼロですが、サイズが追加されています（黒は境界線、赤は影です）：

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 0 3px red;
  border: 3px solid black;
  width: 300px;
  height: 50px;
}

Результат:

この例では、影は移動していませんが、ぼかしとサイズが追加されています（黒は境界線、赤は影です）：

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 3px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

この例では、影はコンテナの内側にあります：

html<div id="elem"></div>

css#elem {
  box-shadow: inset 0 0 6px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат: