結論としては、
box-shadow: <横のズレ> <縦のズレ> <ぼかし> <広がり>;
となります。実際にこちらのプレイグラウンドで試すことができます。
box-shadow: 10px 10px 5px 5px;| 横のズレ (offset-x) | 10 | |
| 縦のズレ (offset-y) | 10 | |
| ぼかし (blur-radius) | 5 | |
| 広がり (spread-radius) | 5 |
※クリックしてから矢印キーを押すことでも値を調整可能です。
それぞれの値の説明
プレイグラウンドを試す時間のない方はこちらをお読みください。
横のズレ・縦のズレ
1番目・2番目の値で、影の落ちる位置が本体からどれだけズレるかを指定します。
box-shadow: 10px 20px;とすると次のようになります。影が本体に比べ、右に 10px、下に 20px ズレています。
ぼかし
3番目の値で、影の輪郭をぼかす強さを指定します。
box-shadow: 10px 20px 10px;とすると次のようになります。
広がり
4番目の値で、影が広がる大きさを指定します。
box-shadow: 10px 20px 0px 10px;とすると次のようになります。
先ほどのぼかしも同時に指定すると、
box-shadow: 10px 20px 10px 10px;次のようになります。
参考
他に可能な操作や、より詳細な情報は次のようなサイトで確認してください。
