本文最后更新于:星期日, 五月 31日 2020, 2:37 下午

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

CSS3 定义了两种类型的渐变(gradients):

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

线性渐变 - 从上到下(默认情况下)

image

.gradual{
   background: linear-gradient(red, orange); 
}

线性渐变 - 从左到右

image

.gradual{
   background: linear-gradient(to right, red, orange); 
}

线性渐变 - 对角

image

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

线性渐变 - 带有指定的角度

image

.gradual{
   background: linear-gradient(60deg, red, orange); 
}

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

image

.gradual{
   background: linear-gradient(red, orange, yellow); 
}

线性渐变 - 带有彩虹颜色

image

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

线性渐变 - 带有透明度

image

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

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

image

.gradual{
   background: repeating-linear-gradient(red, orange, yellow 10%); 
}

径向渐变 - 颜色结点均匀分布(默认情况下)

image

.gradual{
   background: radial-gradient(red, orange, yellow); 
}

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

image

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

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

image

.gradual{
   background: repeating-radial-gradient(red, orange, yellow 10%); 
}


本文标题:微信小程序中的渐变色
文章作者:潘高
发布时间:2018年10月09日 - 00:10:15
最后更新:2020年05月31日 - 14:37:59
原始链接:https://blog.pangao.vip/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E7%9A%84%E6%B8%90%E5%8F%98%E8%89%B2/
许可协议:署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

微信小程序中用setData修改数组或对象 上一篇
微信小程序如何获取屏幕的高度和宽度 下一篇
如果这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝

 目录