微信小程序——CSS3渐变

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

说明

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

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

线性渐变

（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%);

实例

java 复制代码

<view class='container'>
  <view class='demo view11'>11</view>
  <view class='demo view12'>12</view>
  <view class='demo view13'>13</view>
  <view class='demo view14'>14</view>
  <view class='demo view15'>15</view>
  <view class='demo view16'>16</view>
  <view class='demo view17'>17</view>
  <view class='demo view18'>18</view>
  <view class='demo view19'>19</view>
  <view class='demo view20'>20</view>
  <view class='demo view21'>21</view>
  <view class='demo view22'>22</view>
  <view class='demo view23'>23</view>
</view>

线性渐变：从上至下

java 复制代码

.view11 {
   background: linear-gradient(red, blue);
}

线性渐变：从左至右

java 复制代码

.view11 {
   background: linear-gradient(red, blue);
}

线性渐变：对角

java 复制代码

.view13 {
   background: linear-gradient(to bottom right, red , blue);
}

线性渐变：指定角度

java 复制代码

.view14 {
   background: linear-gradient(120deg, red, blue);
}

线性渐变：从上到下，带有多个颜色结点

java 复制代码

.view15 {
   background: linear-gradient(red, green, blue);
}

线性渐变：带有彩虹颜色和文本

java 复制代码

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

线性渐变：从左至右，带有透明度

java 复制代码

.view17 {
   background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

线性渐变：重复线性渐变

java 复制代码

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

径向渐变：颜色结点均匀分布

java 复制代码

![.view19 {
   background: radial-gradient(red, green, blue);
}](https://img-blog.csdnimg.cn/7d650c5d847c4aeea1f88312d053e68e.png)

径向渐变：颜色结点不均匀分布

java 复制代码

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

径向渐变：圆形

java 复制代码

.view21 {
   background: radial-gradient(circle, red, yellow, green);
}

径向渐变：重复径向渐变

java 复制代码

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