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 プロパティの例です。ここでは分りやすいように、 ぼかし と 色 は変更していません。
確認
ボタンで再実行します。いろいろ試してみてください。