他の "Try it Yourself" 例が下にあります。
box-shadow プロパティは、要素に 1 つ以上の影を付けます。
| デフォルト値： | なし |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 可。animatable を参照 Try it |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.boxShadow="10px 20px 30px blue" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
-webkit-、-moz- の後に続く数字 は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
注: box-shadow プロパティは、要素に 1 つ以上の影を付けます。
プロパティは、影のカンマ区切りのリストで、2 ～ 4 個の値により長さ、オプションの色、オプションの inset キーワードを指定します。
省略すると長さは 0 になります。
| 値 | 説明 | Play it |
|---|---|---|
| なし | デフォルト値。影を表示しません | Play it ❯ |
| h-shadow | 必須。横方向の影の位置。負の値が使用できます | Play it ❯ |
| v-shadow | 必須。縦方向の影の位置。負の値が使用できます | Play it ❯ |
| blur | 任意。ぼかしの距離 | Play it ❯ |
| spread | 任意。影の大きさ。負の値が使用できます | Play it ❯ |
| color | 任意。影の色です。デフォルト値は black です。指定可能な色値の完全なリストについては、
CSS 色の値を参照してください。 注:Safari (PCの) では、color パラメータは必須です。color を指定しない場合、 影は全く表示されません。 |
Play it ❯ |
| inset | 任意。outer shadow (outset)から inner shadow へ変更します | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
テーブルの上に投げられた画像
この例は、"polaroid" 写真の作成と写真の回転方法のデモです。
CSS3 チュートリアル：CSS3 Borders
HTML DOM リファレンス：boxShadow プロパティ