CSS3入門 09 円形グラデーションをつけてみよう

円形グラデーションradial-gradientについて学んだ。
今回も使用するブラウザがchromeのため-webkit-radial-gradientと記述した。

参考

#09 円形グラデーションをつけてみよう | CSS3入門 - プログラミングならドットインストール

前回学んだ線形グラデーションの円形版。今回もbackgroundの中に書いていった。
コンマで区切ることで色やグラデーションの範囲を指定できる。

前回と一緒で%での指定も可能。始点の指定も可能。
中央から徐々に外側へと指定した色が適用されていく。ちょっと太陽みたいになる。

始点と色の指定の間にcircleと入れることですごく丸くなる。
他にもontain cover ellipseといったグラデーションの範囲を決めるオプションも一緒に指定可能。