13518219792
小编给大家分享一下CSS中Gradient有多少种渐变，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联是一家专业提供资溪企业网站建设,专注与成都网站制作、做网站、H5技术、小程序制作等业务。10年已为资溪众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
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有多少种渐变”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
