css3の放射状グラデーション

css3の放射状グラデーションについて調べたのでメモ。

使い方は以下の感じ。

background: -webkit-gradient(radial, 50% 50%, 0, 50% 50% 160, from(#FFF), to(#CCC));

 

引数の意味

radial: 放射状グラデーションを指定(線形グラデーションならlinearを指定)

50% 50%: グラデーション開始位置(対象とするボックス内での相対的な位置)

0: 開始地点の円の半径

50% 50%: グラデーション終了位置(対象とするボックス内での相対的な位置)

160: 終了地点の円の半径

from(): 開始時の色

to(): 終了時の色

 

参考サイト:ほんっとにはじめてのHTML

http://honttoni.blog74.fc2.com/blog-entry-75.html