微信小程序wxss渐变色

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

CSS3 定义了两种类型的渐变（gradients）：

                                                                       1/线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

                                                                       2/径向渐变（Radial Gradients）- 由它们的中心定义

1、线性渐变 - 从上到下（默认情况下）

.CellStyle{

  background: linear-gradient(blueviolet, rgba(238, 170, 211, 0.333));

}

注意：这里wxss设置背景颜色的时候，一定是background，写成background-color就不识别了，什么都不显示

2、线性渐变 - 从左到右

.CellStyle{

  background: linear-gradient(to right , blueviolet, rgba(238, 170, 211, 0.333));

}

3、线性渐变 - 对角

.CellStyle{

  background: linear-gradient(to bottom right , blueviolet, rgba(238, 170, 211, 0.333));

}

4、带有指定的角度的线性渐变

.CellStyle{

background: linear-gradient(50deg , blueviolet, rgba(238, 170, 211, 0.333));

}

5、带有多个颜色结点的从上到下的线性渐变

.CellStyle{

background: linear-gradient(rgba(187, 173, 51, 0.733), blueviolet, rgba(238, 170, 211, 0.333));

}

6、线性渐变 - 带有彩虹颜色

.CellStyle{

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

}

7、.CellStyle{

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

}

8、线性渐变 - 从左到右的线性渐变，带有透明度

.CellStyle{

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

}

9、重复线性渐变 - repeating-linear-gradient()函数

.CellStyle{

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

}

10、径向渐变 - 颜色结点均匀分布（默认情况下）

.CellStyle{

background: radial-gradient(red, orange, yellow);

}

11、径向渐变 - 颜色结点不均匀分布

.CellStyle{

background: radial-gradient(red 5%, orange 20%, yellow 80%);

}

12、形状为圆形的径向渐变

.CellStyle{

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

}

13、重复径向渐变 - repeating-radial-gradient()函数

.CellStyle{

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

}