iT邦幫忙

DAY 20
2

HTML5 & CSS3系列 第 20

30天分享(22) - CSS3 漸層

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%);

重複圓形漸層


上一篇
30天分享(21) - CSS3 背景
下一篇
30天分享(23) - CSS3 文字
系列文
HTML5 & CSS328
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言