2016/12/06

cssで綺麗なシャドーを付ける為のまとめ

cssでbox-shadowを使用する際に綺麗なシャドーを付けるまとめbox-shadowはボックスに影を付ける際に使用します。

box-shadow: 10px 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

 

  • 1番目の長さの値は、水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
  • 2番目の長さの値は、垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
  • 3番目の長さの値は、ぼかし距離です。負の値を指定することはできません。 値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
  • 4番目の長さの値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。
  • 色の値を指定すると、影がその色になります。
  • insetキーワードを指定すると、ボックスの外側の影から内側の影に変更されます。

 

うっすらとした影を表示

box-shadow: 0px 1px 4px rgba(0,0,0,0.2);