May 28th,2022
““<shadow>”値”とは？
“<shadow>”値は影の位置やぼかし、広がりの幅、色を表します。“box-shadow”プロパティや“text-shadow”プロパティなどの値として使用することができます。
“<shadow>”値”はもともと“box-shadow”プロパティの値として定義されていたもので、“text-shadow”プロパティでも“inset”キーワードが使用可能になったことで値が“<shadow>”値”として定義されました。
補間時の初期値はすべての“<length>”値が“0”で“<color>”値は“transparent”です。
“<shadow>”値の記述方法
影の位置とぼかし、広がりの幅を指定する2個から4個の“<length>”値と“<color>”値、“inset”キーワードを指定できます。“<color>”値、“inset”キーワードはそれぞれ任意で、“<length>”値の間でなければ記述する順番も自由です。
“<length>”値
“<length>”値は2個、3個もしくは4個指定することができ、指定された順番によってその意味が変わります。
“<length>”値は少なくとも2個指定する必要があります。“<length>”値が2個か3個の場合には省略された値は“0”として扱われます。
2個の“<length>”値
“<length>”値が2個の場合、1個目の値は影の垂直方向のオフセット距離、2個目の値は影の水平方向のオフセット距離を指定します。正の値と負の値のどちらでも指定できます。水平方向の距離は正の値の場合は右方向、負の値の場合は左方向へ影が移動します。垂直方向の距離は正の値の場合は下方向、負の値の場合は上方向へ影が移動します。
box-shadow: 〚垂直方向のオフセット〛 〚水平方向のオフセット〛;
3個の“<length>”値
“<length>”値が3個の場合、1個目と2個目の値は2個の場合と同様で、3個目の値は影のぼかしを指定します。“0”以上の値のみ指定でき、指定された距離は影の色が完全に透明になるまでの距離を表します。“0”とした場合はぼかしがなく、影の縁ははっきりします。
box-shadow: 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚ぼかし〛;
4個の“<length>”値
“<length>”値が4個の場合、1個目から3個目の値は3個の場合と同様で、4個目の値は影の幅を指定します。正と負の値が両方指定でき、指定された距離の分だけ影がすべての方向に縮小、もしくは拡張されます。“0”とした場合は影の大きさは影を落とす要素の大きさと同じなります。
box-shadow: 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚ぼかし〛 〚幅〛;
“<color>”値
“<color>”値は影の色を指定します。“<color>”値を省略した場合はその要素の“color”プロパティの値を使用する“currentColor”とみなされます。
box-shadow: 〚色〛 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚ぼかし〛 〚幅〛;
“inset”
“inset”キーワードを加えると影は要素が沈み込んでいるように見えるように内側に描画されます。要素の外側に影を描画する場合は“inset”キーワードは省略します。
box-shadow: 〚色〛 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚ぼかし〛 〚幅〛 inset;
