CSS3之前漸層色圖片只能用背景圖片
CSS3的漸層色文法可以讓我們省去下載圖片的開銷
並且在改變瀏覽器解析度時有更好的效果
顏色值RGBA
我們熟悉的rgb顏色標準,是由r(red)、g(green)、b(blue)三種顏色疊加變化形成各種顏色
取值0~255,或0~100%
rgba就是在rgb基礎上增加了alpha不透明度參數
.demo { width: 100px; height: 100px; background-color: rgb(255, 0, 0);}
.demo { width: 100px; height: 100px; background-color: rgba(255, 0, 0, 0.5);}
alpha取值0~1,值越小越透明
線性漸層linear-gradient
gradient是“傾斜度”的意思,linear是“線性”的意思
漸層色就是在多個顏色間平穩過渡,形成絢麗的色彩
線性漸層linear-gradient參數有漸層的方向(選填)和任意個漸層色
.demo { width: 100px; height: 100px; background: linear-gradient(red,lime,blue);}
注意我這裡寫的是background不是background-color
(其實漸層色是background-image的函數)
不填寫漸層方向預設是從上到下
漸層方向有以下屬性值
to top、to bottom(預設)、to left、to right
to top left、to top right、to bottom left、to bottom right
或者填寫角度 xxxdeg
比如to top left就代表方向朝向左上
.demo { width: 100px; height: 100px; background: linear-gradient(to top left,red,lime,blue);}
角度0deg與to top等價,增加角度,相當於順時針旋轉
.demo { width: 100px; height: 100px; background: linear-gradient(20deg,red,lime,blue);}
在每一個顏色的後面可以添加各個色彩坡形的位置
.demo { width: 100px; height: 100px; background: linear-gradient(red 30%,lime 50%,blue 70%);}
如果不填的話,瀏覽器就預設均分了,比如三個色值預設就是0%,50%,100%
還有一個不常見的函數repeating-linear-gradient使我們可以重複線性漸層
.demo { width: 100px; height: 100px; background: repeating-linear-gradient(red, rgba(100,100,100,0.5),blue 50%);}
結果就畫出了這樣巨醜無比的漸層色
放射狀漸層radial-gradient
radial意思是“徑向的、輻射狀的”
就是一個漸層中心向外放射漸層
.demo { width: 200px; height: 100px; background: radial-gradient(red,lime,blue);}
和線性漸層類似
不過第一個參數(選填)是放射狀漸層的漸層形狀、位置
可以使用圓形circle、橢圓形ellipse(預設)
.demo { width: 200px; height: 100px; background: radial-gradient(circle,red,lime,blue);}
可以使用shape at postion的格式定義漸層中心的位置
.demo { width: 200px; height: 100px; background: radial-gradient(circle at 30% 30%,red,lime,blue);}
漸層位置可以使百分數形式,也可以是像素形式
如果唯寫一個值時,另一個值預設是中間位置50%
.demo { width: 200px; height: 100px; background: radial-gradient(circle at 30%,red,lime,blue);}
漸層尺寸如果你不想用關鍵字,也可用用數字形式
.demo { width: 200px; height: 100px; background: radial-gradient(100px 100px at 50px 50px,red,lime,blue);}
表示漸層尺寸100px*100px,漸層位置50px*50px
放射狀漸層同樣有一個重複漸層的函數
用法和線性漸層的類似,這裡就不多解釋了
.demo { width: 200px; height: 100px; background: repeating-radial-gradient(red 10%,lime 20%,blue 30%);}