備忘録的プログラミングリファレンス

box-shadowプロパティ

 box-shadowプロパティは、エレメントに影を加えるプロパティです。

 ソリッドな影、ぼかし表現のある影、色の変更もできます。

 より新しいブラウザでは、filterプロパティを使うことで表現できます。

構文(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。広がり半径。正の値は大きく、負の値は小さくなる。
coloroption。影の色。値はCSSのColorです。
insetoption。この値でエレメント内に影が表示される。デフォルトではエレメントの外に表示。
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)none
継承(Inherited)no
変化(Animatable)yes

Example