小编给大家分享一下CSS中Gradient有多少种渐变，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
1、线形渐变，颜色值沿着一条隐式的直线逐渐过渡。
由 linear-gradient() 产生。
为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
计算
安全
数据库
网络和加速
企业服务
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);2、径向渐变，图像的颜色值由中心点（原点）向外扩散并逐渐过渡到其他颜色值。
同样至少需要定义两种颜色节点，也可以指定渐变的中心（默认在中心点，center）、形状（默认椭圆形 ellipse）、大小（默认 farthest-corner，表示到最远的角落）
语法
radial-gradient(
[shape size at position] ?
[ , ]+
)3、重复渐变，重复多次渐变图案直到足够填满指定元素。
由 repeating-linear-gradient() 和 repeating-radial-gradient() 函数产生。
重复函数的参数同上，不同的是它会基于渐变长度（最后一个色标和第一个之间的距离）倍数重复。
.linear-repeat { background: repeating-linear-gradient(
to top left,
lightpink,
lightpink 5px,
white 5px,
white 10px
);
}.radial-repeat { background: repeating-radial-gradient(
powderblue,
powderblue 8px,
white 8px,
white 16px
);
}以上是“CSS中Gradient有多少种渐变”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.py.cn/web/css/32924.html
