ボックスのドロップシャドウを指定するには?
要素書式
box-shadow: 【ドロップシャドウ指定】 [,【ドロップシャドウ指定】...] ;
対応ブラウザ
値一覧
ドロップシャドウは複数指定することが可能です。
| 値 | 内容 |
| ドロップシャドウ指定 | none | 影を表示しません。 |
| 【影の凹凸指定】 【影の色】 【影の水平位置】 【影の垂直位置】 【影のぼかし半径】 【影の拡大半径】 | 指定した内容の影をボックスに表示します。
「影の凹凸指定」と「影の色」の順序は、残りの４つの間に割り込まなければ任意です。
位置と半径を示す４つの数値はこの順序である必要があります。 |
それぞれのドロップシャドウ指定で使用する値の意味は以下の通りです。
| 値 | 内容 |
| 影の凹凸指定 | キーワードinsetを指定すると影がボックスの内側に表示されます。省略した場合は、外側の影になります。 |
| 影の色 | ボックスの影の色を指定します。省略可能です。
省略時にはChromeとSafariでは透明になりますが、IE、Opera、Firefoxではボックスの「color」プロパティと同じ色になります。 |
| 影の水平位置 | 指定された長さだけ、ボックスから右にずれた位置に影を表示します。 |
| 影の垂直位置 | 指定された長さだけ、ボックスから下にずれた位置に影を表示します。 |
| 影のぼかし半径 | 影のぼかし半径を指定します。
この値が大きいほど、影は薄くぼかされ、大きくなります。省略可能です。 |
| 影の拡大半径 | 影の拡大縮小を指定します。
正の値であればそれだけ影が拡大し、負の値であればそれだけ影が縮小して表示されます。省略可能です。 |
解説文
box-shadowプロパティを指定すると、ボックスに効果として影をつけることができます。ボックスに角丸効果を付けた場合は、影の角も丸くなります。
影を指定するには、「影の凹凸指定」、「影の色」に、「影の水平位置」、「影の垂直位置」、「影のぼかし半径」、「影の拡大半径」を指定します。「影の水平位置」と「影の垂直位置」のみ必須です。
「影の凹凸指定」は影がボックスの外側に伸びるか（ボックスが浮き上がって見える効果）、ボックスの内側に伸びるか（ボックスが内側に向けて窪んでみえる効果）を指定します。何も指定しなかった場合は既定で外側の影となり、「inset」を指定すると、内側の影となります。
「影の色」には表示する影の色を指定します。「影の色」は省略可能ですが、ブラウザによって省略時の既定の色が異なるので、複数のブラウザで同一の表示をさせる場合には明示的に指定する必要があります。
「影の水平位置」と「影の垂直位置」には、影をその値の分だけずらす長さを指定します。たとえば「7px 8px」と指定すると、ボックスから右に7px、下に8pxずらした位置に影が表示されます。「影のぼかし半径」は、影のぼかしの程度を指定します。この値が大きいほど影は広く薄くぼかされて表示されます。
「影の拡大半径」は影をボックスの大きさより拡大縮小して表示したいときに指定します。正の値を指定するとそれだけ拡大され、負の値を指定するとそれだけ縮小されます。
以下のように指定すると、緑色の影が、文字列から、右に5px、下に7pxずらした場所に、1pxのぼかし半径、5pxの拡大半径で、外側に表示されます。
box-shadow: green 5px 7px 1px 5px;
同じボックスに複数の影を付けることもできます。その場合には、影の設定をカンマで区切って、続けて指定します。
複数指定した場合、最初に指定した影が一番上になり、次の影がその下に重なり、以下順次、下に重なっていく形になります。
以下の例では緑の影に追加して、赤い影を表示しています。
text-shadow: green 5px 7px 1px, red 10px 10px;
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
width:100px;
height:100px;
border:1px solid silver;
margin:50px;
color:white;
background-color:green;
}
#box1 {
box-shadow: 0.5em 0.5em blue;
}
#box2 {
box-shadow: 0.5em 0.5em blue, red -0.2em 0.7em 5px;
}
#box3 {
box-shadow: 0.5em 0.5em 1em 1em blue ;
}
#box4 {
box-shadow: 0.5em 0.5em 1em blue inset ;
}
</style>
</head>
<body>
<p id="box1" class="box">右下に青い影を表示します</p>
<p id="box2" class="box">上に追加して左下に赤い影を表示します</p>
<p id="box3" class="box">ぼかしたうえで拡大した青い影を表示します</p>
<p id="box4" class="box">内側に影を表示します</p>
</body>
</html>
関連項目
