CSSリファレンス
box-shadowの意味と使い方
「box-shadow」はボックスに影をつけるプロパティです。影の長さ、色、ボックスの外側か内側かを以下の決まりにしたがって指定します。
影の設定をカンマ区切りで複数記述すれば、指定した数の影をつけることもできます。その場合、最初に指定した影が1番上に、以降指定した順に表示され、最後に指定した影が1番下に表示されます。
値の指定方法
none
影をつけない状態にします。
実数値+単位
数値に単位を付けて、影の長さを指定します。必要な値を半角スペースで区切って指定します。指定する順序は以下のような決まりになっています。
1つ目の値:右方向へどれだけズラルカを指定します。負の値を指定した場合は左側にずれます。
2つ目の値:下方向へどれだけずらすかを指定します。負の値を指定した場合は上側にずれます。
3つ目の値:影をぼかす範囲を指定します。負の値は指定できません。値が「0」の場合は影の輪郭がはっきりし、値が大きくなるほど輪郭のばかしが強くなります。省略した場合は「0」を指定したものとみなされます。
4つ目の値:影を広げる距離を指定します。生の値を指定すると影が全ての方向に広がり、負の値を指定すると小さくなります。省略した場合は「0」を指定したものとみなされます。
色
影の色を指定します。省略した場合の影の色はブラウザに依存します。
inset
この値を指定すると、ボックスの内側に影が表示されます。