円形グラデーション
| radial-gradient(開始位置,形状とサイズ,開始色 位置,終了色 位置); |
| |
| 線形グラデーションと同様現在(2011.10.2)この関数（ radial-gradient() ）は一部のブラウザ(moz系webkit系)でbackgroundとbackground-imageプロパティ−を指定したときのみ有効となっています |
| |
| 円形のグラデーションの場合はmoz系とwebkit系では随分標示結果が変わってしまうので2011.10.2の現段階では、まだ実用的ではないかもしれませんね。 |
| |
| 形状 | 説明 | |
|---|
| circle | 円 | |
|---|
| ellipse | 楕円（初期値）形状指定省略時はこの値になる | |
|---|
| サイズ | 形状指定 | 説明 |
|---|
| closest-side | circle | 円の中心から最も近いBOXの辺に内接 |
|---|
| closest-side | ellipse | 楕円の中心から最も近いBOXの縦と横の辺に内接 |
|---|
| closest-corner | | 円または楕円のもっともちかいBOXの角に内接 |
|---|
| farthest-side | circle | 円の中心から最も遠いBOXの辺に内接 |
|---|
| farthest-side | ellipse | 楕円の中心から最も遠いBOXの縦と横の辺に内接 |
|---|
| farthest-corner | | 円または楕円のもっとも遠いBOXの角に内接 |
|---|
| contain | | closest-sideと同じです |
|---|
| cover（初期値） | | farthest-sideと同じです |
|---|
|
| ベンダープレフィックスをつけた記述 |
| background:-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色)); |
| |
| background:-moz-radial-gradient(開始位置 角度,形状 サイズ,開始色 位置,終了色 位置); |
| |
| radialを指定する事で円形グラデーションを実現します。 |
|
| 記述例 |
| #engura { |
| background: -moz-radial-gradient(#FFD700, green); |
| background: -webkit-gradient(radial, center center, 15, center center, 100, from(#FFD700), to(green)); |
| } |
|
実行例とサンプルコード
| background: -moz-radial-gradient(#FFD700, Blue); |
| background: -webkit-gradient(radial, center center, 15, center center, 100, from(#FFD700), to(Blue)); |
|
| |
透明度も指定できます
| background: -webkit-gradient(radial, center top, 100, center top, 500, from(rgba(0,0,139,1)), to(rgba(255,255,255,0))); |
| background: -moz-radial-gradient(center top, circle farthest-side, rgba(0,0,139,1), rgba(255,255,255,0)); |
|
|