CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 box-Usage and examples of shadow attribute

box-The shadow CSS property applies one or more shadow effects to the box of an element.

The following table provides usage instructions and version history of this attribute, as well as the syntax of using this attribute in JavaScript scripts.

Default value:	none
Applies to:	All elements. It also applies to::first-letter。
Inheritance:	none
Animatable:	is.View animation properties。
Version:	CSS3new feature
JavaScript syntax:	object.style.boxShadow="8px 8px 6px #000000"

box-The syntax of using shadow

The syntax of this attribute is as follows:

box-shadow: [ , , ... shadowN] | none | initial | inherit
　　　　　　　where shadow is: [ inset [ offset-x offset-y blur-radius spread-radius color ] ]

以下の例では、boxを使用する方法を示しています-shadow属性。

例

.shadow{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow:　2px　2px　4px　2px　#999;
}

テストして‹/›

insetキーワードを使用して要素の枠内に影を適用することができます。插图影は枠内に描かれ、背景の上、但し内容の下にあります。

例

.shadow-inside{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow:　inset　0　0　6px　2px　#999;
}

テストして‹/›

属性値

以下の表はこの属性の値を説明しています。

値	説明
必須 -この属性を有効にするために以下の値を指定する必要があります。
offset-x	第一の長さ値は影の水平距離を指定します。正の値は影をフレームの右側にずらし、負の値は影を左側にずらします。
offset-y	第二の長さ値は影の垂直距離を指定します。正の値は影を下にずらし、負の値は要素上の影をずらします。
オプション -以下の値はオプションです。
blur-radius	第三の長さ値はぼやけ距離です。この値が大きいほど、ぼやけが大きくなり、影が大きくなり明るくなります。デフォルト値は0で、影は鋭利です。負の値は使用できません。
spread-radius	第四の長さは拡張距離です。正の値は影の形状をすべての方向に指定された半径で拡張します。負の値は影の形状を収縮します。
color	色は影の色です。この値はサポートされているどんなものでもできます色値。指定されていない場合、通常はcolorの値。
inset	存在する場合、投影影を外部影から内部影に変更します。埋め込み影は枠内に描かれ、背景の上、但し要素の内容の下にあります。
none	影を表示しません。デフォルト値です。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のboxを使用します-shadowの属性値。

ブラウザの互換性

box-shadow属性のブラウザの互換性について、以下の表の数字は、この属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox 3.5+ ^-moz-、4 + Google Chrome 4+ ^-webkit-、10+ Internet Explorer 9+ Apple Safari 3.1+ ^-webkit-、5.1 + Opera 10.5+

さらに詳しく

以下のチュートリアルを参照してください：CSS3影、CSSの仮要素。