box-shadow:影

概要

“box-shadow”プロパティは要素が落とす影を指定するプロパティです。

影は要素の外側、もしくは内側に落ちるように描画されます。

要素の外側に影を落とす場合は、要素が浮き上がっているように見えるようにボーダーの外縁より外側のその要素の背景の下に描画されます。

要素の内側に影を落とす場合は、要素が沈み込んでいるように見えるようにパディングの外縁より内側の要素の背景の上、ボーダーの下に描画されます。

サンプルコード

div { box-shadow: rgb(204,153,204) 15px 15px 5px 0;}


値

値の指定方法

“<shadow>”値

“<shadow>”値は“<color>”値と“inset”、複数の“<length>”値の組み合わせです。それぞれの値は半角スペース(“ ”)で区切って記述します。

“<length>”値は2個、3個、もしくは4個指定できます。“<length>”値の指定は必須です。

“<length>”値が2個の場合、1個目の値は影の垂直方向のオフセット距離、2個目の値は影の水平方向のオフセット距離を指定します。正と負の値が両方指定できます。水平方向の距離は正の値の場合は右方向、負の値の場合は左方向へ影が移動します。垂直方向の距離は正の値の場合は下方向、負の値の場合は上方向へ影が移動します。

box-shadow: 〚垂直方向のオフセット〛 〚水平方向のオフセット〛;


“<length>”値が3個の場合、1個目と2個目の値は2個の場合と同様で、3個目の値は影のぼかしを指定します。“0”以上の値のみ指定でき、指定された距離は影の色が完全に透明になるまでの距離を表します。“0”とした場合はぼかしがなく、影の縁ははっきりします。

box-shadow: 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚ぼかし〛;


“<length>”値が4個の場合、1個目から3個目の値は3個の場合と同様で、4個目の値は影の幅を指定します。正と負の値が両方指定でき、指定された距離の分だけ影がすべての方向に縮小、もしくは拡張されます。“0”とした場合は影の大きさは要素の大きさと同じなります。

box-shadow: 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚ぼかし〛 〚幅〛;


“<length>”値を2個、もしくは3個指定する場合、省略された値は“0”として扱われます。

“<length>”値に加えて、“<color>”値と“inset”キーワードを指定できます。これらの値はそれぞれ任意で、記述する順番も自由です。

“<color>”値は影の色を指定します。“<color>”値を省略した場合はその要素の“color”プロパティの値を使用する“currentColor”とみなされます。

box-shadow: 〚色〛 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚ぼかし〛 〚幅〛;


“inset”キーワードを加えると影は要素が沈み込んでいるように見えるように内側に描画されます。要素の外側に影を描画する場合は“inset”のキーワードは省略します。

box-shadow: 〚色〛 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚ぼかし〛 〚幅〛 inset;


“none”

“none”のキーワードは影を描画しないことを表します。他の値との併用はできません。

box-shadow: none;


複数の影の指定

値のセットをカンマ(“,”)で区切って並べて記述することで一つの要素に複数の影を設定することができます。最初に記述した影が最前面、最後に記述した影が最背面になるように、重ねて描画されます。

box-shadow:

〚一番手前の影の色〛 〚一番手前の影の垂直方向のオフセット〛 〚一番手前の影の水平方向のオフセット〛 〚一番手前の影のぼかし〛 〚一番手前の影の幅〛 inset,
〚手前から二番目の影の色〛 〚手前から二番目の影の垂直方向のオフセット〛 〚手前から二番目の影の水平方向のオフセット〛 〚手前から二番目の影のぼかし〛 〚手前から二番目の影の幅〛 inset,
〚手前から三番目の影の色〛 〚手前から三番目の影の垂直方向のオフセット〛 〚手前から三番目の影の水平方向のオフセット〛 〚手前から三番目の影のぼかし〛 〚手前から三番目の影の幅〛 inset,
...,
〚一番奥の影の色〛 〚一番奥の影の垂直方向のオフセット〛 〚一番奥の影の水平方向のオフセット〛 〚一番奥の影のぼかし〛 〚一番奥の影の幅〛 inset;

仕様書

影を外側に落とす

div {

10px solid rgb(0,0,0);
border-radius: 10px;
box-shadow: rgb(204,153,204) 15px 15px 5px 0;

}

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

影を内側に落とす

div {

10px solid rgb(0,0,0);
border-radius: 10px;
box-shadow: rgb(204,153,204) 15px 15px 5px 0 inset;

}

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

複数の影を指定する

div {

10px solid rgb(0,0,0);
border-radius: 10px;
box-shadow: rgb(204,153,204) 15px 15px 5px 0,rgb(142,135,143) -5px -5px 5px 10px,rgb(90,188,166) 15px 15px 5px 0 inset;

}

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。