box-shadow プロパティ
box-shadow プロパティは、エレメントに影を加える CSS のプロパティです。
ソリッドな影、ぼかし表現のある影、色の指定もできます。
box-shadow: 5px 10px 0px black;
このエレメントに影を加えています
詳しくはExample
を参照してください
, ( カンマ )
で区切って複数の影が指定できます。
より新しいブラウザでは、filter プロパティを使うことで表現できます。
この box-shadow プロパティはエレメントに影を表示することが前提で、エレメント内のコンテンツに影は作成されません。
エレメント内のコンテンツや形を指定した影を表示するには filter プロパティを使用します。
ページ内 Index
構文(Syntax)
CSS
box-shadow: none | h-offset v-offset blur spread color | inset ;
DOM ( JavaScript )
object.style.boxShadow
object.style.boxShadow=" none | h-offset v-offset blur spread color | inset "
値（Values）
| Value | 摘要 |
|---|---|
| none | 初期値（default値）。 |
| h-offset | 水平方向のオフセット。正の値は右側に、負の値は左側に表示される。 |
| v-offset | 垂直方向のオフセット。正の値は下側に、負の値は上側に表示される。 |
| blur | 値はCSSの長さの単位。option。影のぼかし表現。ぼかし半径で大きいほどぼやける。 |
| spread | 値はCSSの長さの単位。option。広がり半径。正の値は大きく、負の値は小さくなる。 |
| color | option。影の色。値はCSSのColorです。 |
| inset | option。この値でエレメント内に影が表示される。デフォルトではエレメントの外に表示。 |
| initial | 初期値に戻す。 |
| inherit | 親エレメントのプロパティを継承。 |
備考（Remarks）
| 初期値（Default value） | none |
| 継承（Inherited） | no |
| 変化（Animatable） | yes |
Example
box-shadow プロパティの例です。ここでは分りやすいように、 ぼかし と 色 は変更していません。
確認
ボタンで再実行します。いろいろ試してみてください。