| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {box-shadow: 値 } |
| 値 の形式 |
影，影１，影２： [ inset ] 水平距離 垂直距離 [ ぼかし半径 ] [ 広がり距離 ] 影の色 |
| 初 期 値 | none |
| 対応ブラウザー | C3+ / e9+ / N?+ / Fx4+ / Op10.5+ / Ch10+ / Sa5.1+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
box-shadowプロパティ は，ボックスに影をつける指定 をします。
指定できる値の形式は，text-shadow プロパティ と同様で，以下のとおりです。
| 値 | 説 明 |
|---|---|
| none | 影を表示しません。 （初期値） |
| 水平距離 | 影を表示する水平位置をオフセットで指定します。 正の値は右方向への移動距離を表し，負の値は左方向への移動距離を表します。 |
| 垂直距離 | 影を表示する垂直位置をオフセットで指定します。 正の値は下方向への移動距離を表し，負の値は上方向への移動距離を表します。 |
| ぼかし半径 | 影のぼかし半径を指定します。 負の値は指定できません。 0 の場合はぼかしなしのシャープな影になります。 |
| 広がり距離 | 影の広がりの半径を指定します。 負の値は縮約することを表します。 |
| 影の色 | 影の色を指定します。 |
| inset | 通常（この値を指定しない場合）はボックスの外側に影を表示するのに対して，ボックスの内側に影を表示します。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
div.sample {
width: 30em;
margin: 20px 10px 10px;
padding: 5px;
border: 1px solid #8c8c8c ;
text-align: center;
}
.bshad1 { box-shadow: 3px 3px 8px #0000ff; }
.bshad2 { box-shadow: 3px 3px 8px #0000ff,
-3px -3px 8px #0000ff; }
.bshad3 { box-shadow: 3px 3px 8px #0000ff,
3px -3px 8px #0000ff; }
.bshad4 { box-shadow: 1.5px 1.5px 0px #8800ff,
3px 3px 10px #0000ff; }
.bshad5 { box-shadow: inset 3px 3px 8px #0000ff,
inset -3px -3px 8px #0000ff; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample bshad1">box-shadow プロパティ - ボックスに影をつける</div> <div class="sample bshad2">box-shadow プロパティ - ボックスに影をつける</div> <div class="sample bshad3">box-shadow プロパティ - ボックスに影をつける</div> <div class="sample bshad4">box-shadow プロパティ - ボックスに影をつける</div> <div class="sample bshad5">box-shadow プロパティ - ボックスに影をつける</div> |
| ブラウザー 表示例 |
|---|
box-shadow プロパティ - ボックスに影をつける
↑ { box-shadow: 3px 3px 8px #0000ff; }
影は右と下に出ます box-shadow プロパティ - ボックスに影をつける
↑ { box-shadow: 3px 3px 8px #0000ff, -3px -3px 8px #0000ff; }
影は右と下，左と上に出ます box-shadow プロパティ - ボックスに影をつける
↑ { box-shadow: 3px 3px 8px #0000ff, 3px -3px 8px #0000ff; }
影は右と下と上に出ます box-shadow プロパティ - ボックスに影をつける
↑ { box-shadow: 1.5px 1.5px 0px #8800ff, 3px 3px 10px #0000ff; }
２つの影を重ねることも出来ます box-shadow プロパティ - ボックスに影をつける
↑ bshad5 { box-shadow: inset 3px 3px 8px #0000ff, inset -3px -3px 8px #0000ff; }
影は内側の右と下，左と上に出ます |