CSS3ボックスシャドウプロパティ
ブラウザのサポート
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
プロパティ | |||||
---|---|---|---|---|---|
ボーダーイメージ | 10.0 -webkit- | 9.0.0 | 4.0(2.0)[3] 3.5(1.9.1) -moz | 5.1 [1] 3.0 -webkit | 10.5 [1] -O- |
属性の定義と指示
箱-shadowプロパティは、ドロップシャドウの箱の一つ以上設定することができます。
デフォルト: | なし |
---|---|
継承: | いいえ |
バージョン: | CSS3 |
JavaScriptシンタックス: | オブジェクト.style.boxShadow = "10pxの10pxの5pxの#888888" |
文法
box-shadow:h-shadow v-shadow blur spread colorinset;
注:boxShadowプロパティを1を追加したり、複数のフレームに影をドロップします。プロパティは、それぞれが2-4長さの値は、オプションのカラー値と指定したオプションのインセットキーワードの影、影のカンマ区切りリストです。 長さの値を省略すると、0です。
値 | 説明 |
---|---|
H-影 | 必須。 水平影の位置。 負の許可 |
V-影 | 必須。 影の垂直位置。 負の許可 |
ブラー | オプション。 ファジィ距離 |
スプレッド | オプション。 影の大きさ |
カラー | オプション。 影の色。 CSSカラー値のカラー値の完全なリストを検索します |
インセット | オプション。 (先頭の)外層の影から影内側の影を変更します |
オンラインの例
画像を回転します
この例では、「ポラロイド」写真を作成し、画像を回転する方法を示しています。
関連記事
CSS3のチュートリアル: CSS3ボーダー