最新のWeb開発のチュートリアル
 

Style boxShadow Property

<スタイルオブジェクト

div要素にボックスシャドウを追加します。

document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";
»それを自分で試してみてください

定義と使用法

boxShadowプロパティセットまたはボックス要素のドロップシャドウを返します。


ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

boxShadowプロパティは、IE9 +、Firefoxの、クロム、オペラ、およびSafari 5.1.1でサポートされています。


構文

boxShadowプロパティを返します:

object .style.boxShadow

boxShadowプロパティを設定します。

object .style.boxShadow="none| Note: boxShadowプロパティは、ボックスへの1つ以上のドロップシャドウを付けます。 プロパティは、それぞれ2-4の長さの値、任意の色、および任意のはめ込みキーワードによって指定されたシャドウのカンマ区切りリスト、です。 省略長さは0です。

プロパティ値

説明
none デフォルト値。 影は表示されません
h-shadow 必須。 横シャドーの位置。 負の値は許可されています
v-shadow 必須。 縦シャドーの位置。 負の値は許可されています
blur 任意。 ブラー距離
spread 任意。 影の大きさ
color 任意。 影の色。 デフォルト値は黒です。 見CSSカラー値の可能な色の値の完全なリストについて。

注意:Safariでは(on PC)色パラメータが必要です。 あなたは色を指定しない場合、影がまったく表示されません。
inset 任意。 外側の影から影を変更し(outset)の内側に影
initial このプロパティがデフォルト値に設定します。 最初の記事を読みます
inherit その親要素からこのプロパティを継承します。 継承についての記事を読みます

技術的な詳細

デフォルト値: なし
戻り値: 要素のボックスシャドウプロパティを表す文字列、
CSSのバージョン CSS3

関連ページ

CSSリファレンス: box-shadow property


<スタイルオブジェクト