このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

box-shadow”プロパティ:影CSS3で追加

記事Mar. 5th,2021
要素の影を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 box-shadow: none;
適用対象 すべての要素
継承 No
パーセント値 パーセント値は指定できません
計算値 none”、もしくは4個の絶対長、算出された色、“inset”をアイテムとするリスト
アニメーション 計算値による(“none”はアイテムがないリストとして扱い、リスト・アイテムが不足する場合は空白の影(“transparent 0 0 0 0”)を付け加えます)

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

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

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

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

CSSのボックスモデル

サンプルコード

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

説明
<shadow>”値
<length> pxemなどで影の位置や幅、ぼかしを指定 (詳細は次の項を参照。)
<color> rgb()”関数16進数カラーコードカラーネームなどで影の色を指定 (省略した場合currentColorとなります。)
inset 影を要素の内側に落とす (省略した場合は影を要素の外側に落とします。)
他の値
none 影を表示しない
共通キーワード

値の指定方法

<shadow>”値

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

<length>”値は2個、3個、もしくは4個指定できます。<length>”値は少なくとも2個指定する必要があります。<length>”値が2個か3個の場合には省略された値は“0”として扱われます。

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

補間時の初期値は“0”と“transparent”です。

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;

none

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

box-shadow: none;

複数の影の指定

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

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

仕様書

定義されている仕様書
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
box-shadow
定義なし

定義なし

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
<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;
}

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

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク