注：因最近在研究微信小程序，所以記錄下觀看
CSS3 漸變（gradients）可以在兩個或多個指定的顏色之間顯示平穩的過渡。
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
線性漸變 - 從上到下（默認情況下）
.view11 {
width: 240px;
height: 60px;
margin: 10px auto;
background: linear-gradient(red, blue);
}
線性漸變 - 從左到右
.view12 {
width: 240px;
height: 60px;
margin: 10px auto;
background: linear-gradient(to right, red , blue);
}
線性漸變 - 對角
.view13 {
width: 240px;
height: 60px;
margin: 10px auto;
background: linear-gradient(to bottom right, red , blue);
}
帶有指定的角度的線性漸變
.view14 {
width: 240px;
height: 60px;
margin: 10px auto;
background: linear-gradient(120deg, red, blue);
}
帶有多個顏色結點的從上到下的線性漸變
.view15 {
width: 240px;
height: 60px;
margin: 10px auto;
background: linear-gradient(red, green, blue);
}
帶有彩虹顏色和文本的線性漸變
.view16 {
width: 240px;
height: 60px;
margin: 10px auto;
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
從左到右的線性漸變，帶有透明度
.view17 {
width: 240px;
height: 60px;
margin: 10px auto;
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
repeating-linear-gradient() 函數用於重複線性漸變
.view18 {
width: 240px;
height: 60px;
margin: 10px auto;
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
徑向漸變 - 顏色結點均勻分佈（默認情況下）
.view21 {
width: 120px;
height: 120px;
margin: 10px auto;
background: radial-gradient(red, green, blue);
}
徑向漸變 - 顏色結點不均勻分佈
.view22 {
width: 120px;
height: 120px;
margin: 10px auto;
background: radial-gradient(red 5%, green 15%, blue 60%);
}
形狀爲圓形的徑向漸變
.view23 {
width: 120px;
height: 120px;
margin: 10px auto;
background: radial-gradient(circle, red, yellow, green);
}
repeating-radial-gradient() 函數用於重複徑向漸變
.view26 {
width: 120px;
height: 120px;
margin: 10px auto;
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
參考資料
w3school 在線教程
CSS3 教程 | 菜鳥教程
其他
完整代碼：https://github.com/guyoung/GyWxappCases/tree/master/CSS3
原文章：https://mp.weixin.qq.com/s/8hjraP9f2X30aE8wSILguw