微信小程序wxss中渐变色

CSS3 渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向；
• 径向渐变（Radial Gradients）- 由它们的中心定义。

1.线性渐变

（1）从上到下渐变（默认情况）

background: linear-gradient(red, blue);

（2）从左到右渐变

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

（3）对角方向渐变

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

（4）指定角度渐变

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

（5）从上到下，带有多个颜色结点渐变

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

（6）带有彩虹颜色和文本渐变

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

（7）从左至右，带有透明度

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

（8）重复线性渐变

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

2.径向渐变

（1）颜色结点均匀分布

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

（2）颜色结点不均匀分布

background: radial-gradient(red 5%, green 15%, blue 60%);

（3）形状为圆形渐变

background: radial-gradient(circle, red, yellow, green);

（4）重复径向渐变

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

参考资料：

1.https://blog.csdn.net/i_dont_know_a/article/details/81146990

2.https://blog.csdn.net/huangxiaoguo1/article/details/80013943