注：因最近在研究微信小程序，所以記錄下觀看
CSS3 漸變（gradients）可以在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡输莺。
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
線性漸變 - 從上到下（默認(rèn)情況下）
.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);
}
帶有多個顏色結(jié)點的從上到下的線性漸變
.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() 函數(shù)用于重復(fù)線性漸變
.view18?{
? ?width:?240px;
? ?height:?60px;
? ?margin:?10px?auto;
? ?background:?repeating-linear-gradient(red,?yellow?10%,?green?20%);
}
徑向漸變 - 顏色結(jié)點均勻分布（默認(rèn)情況下）
.view21?{
? ?width:?120px;
? ?height:?120px;
? ?margin:?10px?auto;
? ?background:?radial-gradient(red,?green,?blue);
}
徑向漸變 - 顏色結(jié)點不均勻分布
.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() 函數(shù)用于重復(fù)徑向漸變
.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
