30天分享(22) - CSS3 漸層

CSS3 新增許多漸層，讓我們直接來看看使用方式 :

background: linear-gradient(red, blue);

一般線性漸層，由上至下

background: linear-gradient(to right, red , blue);

線性漸層，由左至右

background: linear-gradient(to bottom right, red , blue);

線性漸層，左下至右上

background: linear-gradient(180deg, red, blue);

線性漸層，指定角度

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

線性漸層，支援透明度

background: repeating-linear-gradient(red, yellow 10%, green 20%);

重複線性漸層，指定 % 數設定顏色所占面積

background: radial-gradient(red, green, blue);

圓形漸層

background: repeating-radial-gradient(red, yellow 10%, green 15%);

重複圓形漸層