css3で線形と円形のグラデーション

Webデザイン

css3のグラデーションは、線形と円形の2つがあります

線形グラデーション

background: #f60;
background: -moz-linear-gradient(top, #fff, #f60);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f60));
background: linear-gradient(top, #fff, #f60);

img01.png

円形グラデーション

background: #f9a;
background: -moz-radial-gradient(#fff, #f9a);
background: -webkit-gradient(radial, center center, 20, center center, 100, from(#fff), to(#f9a));
background: radial-gradient(#fff, #f9a);

img02.png

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です