“box-shadow”プロパティ:影

概要

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

影は“inset”キーワードの有無によって要素の外側、もしくは内側に落ちるように描画されます。

“inset”キーワードがない場合、要素が浮き上がっているように見えるように要素の外側に描画されます。影はボーダーの外縁より外側のその要素の背景の下に描画されます。

“inset”キーワードがある場合、要素が沈み込んでいるように見えるように要素の内側に描画されます。影はパディング・ボックスに、背景の上、ボーダーの下に描画されます。

サンプルコード

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


値

複数の影の指定

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

box-shadow:

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

仕様書

定義されている仕様書

box-shadow

<length>
<color>
inset
none

影を外側に落とす

div {

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

}

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

影を内側に落とす

div {

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

}

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

複数の影を指定する

div {

10px solid;
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;

}

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