box-shadow プロパティ
box-shadow プロパティは、エレメントに影を加えるプロパティです。
ソリッドな影、ぼかし表現のある影、色の変更もできます。
box-shadow: 5px 10px 0px black;
Exampleを参照してください
より新しいブラウザでは、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 プロパティの例です。ここでは分りやすいように、 ぼかし と 色 は変更していません。
確認
ボタンで再実行します。いろいろ試してみてください。