drop-shadow関数

関数drop-shadowは背景画像に影を追加することを可能にします。

構文

cssセレクタ {
  filter: drop-shadow(x方向のオフセット, y方向のオフセット, ぼかし半径, 色);
}

値

値	説明
x方向のオフセット	背景に対する影の水平方向のオフセット。正の数は影を右に、負の数は左に移動させます。必須パラメータです。
y方向のオフセット	背景に対する影の垂直方向のオフセット。正の数は影を下に、負の数は上に移動させます。必須パラメータです。
ぼかし半径	影のぼかし半径を設定します。値が大きいほど、影はより強くぼやけます。オプションパラメータです。デフォルト値は `0`です。
色	影の色。オプションパラメータです。デフォルトでは影の色は黒に設定されます。

例

画像に対して、軸方向のオフセットなしでぼかし半径5pxの青緑色の影を設定してみましょう:

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

css#elem {
  filter: drop-shadow(0 0 5px #035470);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

drop-shadow関数

構文

値

例

関連項目