微信小程序（4）——CSS3渐变

朴灿烈づ我的快乐病毒、 2022-05-19 06:16 231阅读 0赞

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

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

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

▍demo.wxml

▍demo.wxss

.container{
      /* 内边距  */
      padding: 20rpx;
    }
    
    .demo{
      /* flex布局  */
      display: flex;
      /* 对齐方式  */
      justify-content: center;
      /* 底部距离  */
      margin-bottom: 20rpx;
      /* 边框  */
      border: 1rpx solid #888;
      /* 宽度  */
      width: 100%;
      /* 高度  */
      height: 200rpx;
      /* 行高  */
      line-height: 200rpx;
      /* 字体颜色  */
      color: white;
      /* 设置字间距  */
      letter-spacing: 5rpx;
    }

▍线性渐变：从上至下

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

![70][]

▍线性渐变：从左至右

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

![70 1][]

▍线性渐变：对角

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

![70 2][]

▍线性渐变：指定角度

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

![70 3][]

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

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

![70 4][]

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

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

![70 5][]

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

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

![70 6][]

▍线性渐变：重复线性渐变

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

![70 7][]

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

.view19 {
       background: radial-gradient(red, green, blue);
    }

![70 8][]

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

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

![70 9][]

▍径向渐变：圆形

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

![70 10][]

▍径向渐变：重复径向渐变

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

![70 11][]

▍原文

[微信小程序使用CSS3——渐变][CSS3]

![关注公众号：爱唱歌的蜗牛先生][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]

[70]: /images/20220519/78ed7f481d524684bde7a717195f26ed.png
[70 1]: /images/20220519/ca08890574e648119db087b3704e2883.png
[70 2]: /images/20220519/141c14b9c7284a7d9ee3c14049d3f902.png
[70 3]: /images/20220519/bff76c26bf884eec848ad633b53b3f4a.png
[70 4]: /images/20220519/cb03a02ac17645d8a24eaba303085b0c.png
[70 5]: /images/20220519/e9a4df42591b4c19bdb869d3b25fc2bb.png
[70 6]: /images/20220519/cbc5fb6e46b94dcfa06d7f1fc9dbe215.png
[70 7]: /images/20220519/a603ea929f184408950285fd48f05cb8.png
[70 8]: /images/20220519/82ec246e8720440ea865a30cad5d10c0.png
[70 9]: /images/20220519/b16c0a197f034e128db341e5b49500a4.png
[70 10]: /images/20220519/2041f8bfb6c9450695d72350370dab6c.png
[70 11]: /images/20220519/98314df17b9041059054d837d455d90e.png
[CSS3]: https://mp.weixin.qq.com/s/8hjraP9f2X30aE8wSILguw
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]: /images/20220519/64e79e155b804d9780db30aa70b7d122.png