CSS3 box-shadow プロパティ
 完全な CSS3 リファレンス
例
div 要素へ box-shadow を追加します:
div
{
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */
box-shadow: 10px 10px 5px #888888;
} |
Try it yourself »
このページの下には、他の例もあります。 |
ブラウザ・サポート
box-shadow プロパティは、IE9+、Firefox 4、Chromeおよび Opera でサポートされています。
Firefox 3.6 以前では、代替手段として -moz-box-shadow プロパティをサポートしています。
Safari は、代替手段として -webkit-box-shadow プロパティをサポートしています。
定義と用法
box-shadow プロパティは、ボックスへ複数の影を付けます。
| デフォルト値: |
none |
| 継承: |
no |
| バージョン: |
CSS3 |
| JavaScript構文: |
object.style.boxShadow="10px 10px 5px #888888" |
構文
| box-shadow: h-shadow v-shadow blur spread color inset; |
注: box-shadow プロパティは、ボックスへ1つ以上の影を付けます。
プロパティは、それぞれ、任意の色および任意の挿入キーワードで2-4のレングス値で指定された
、影のコンマ区切りのリストです。レングス値を省略すると0になります。
| 値 |
説明 |
| h-shadow |
必須。水平な影の位置。 負数の指定が可能です |
| v-shadow |
必須。垂直な影の位置。 負数の指定が可能です |
| blur |
任意。ぼかし距離 |
| spread |
任意。影のサイズ |
| color |
任意。影の色。指定可能な色値の完全なリストは、CSS 色値 を見てください |
| inset |
任意。外側の影(outset)から内側の影へ変更します |
 |
Try it Yourself - Examples |
テーブルに投げかけられたイメージ
この例は、どのように"ポラロイド"写真を作成し、写真を回転させるかを示します。
関連ページ
CSS3 チュートリアル: CSS3 Borders
完全な CSS3 リファレンス
|