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的三种渐变，希望对大家有所帮助。更多css学习指路：css教程
本文转载于php中文网，如有侵犯联系作者修改。
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/2353/viewspace-2828246/ ，如需转载，请注明出处，否则将追究法律责任。
下一篇：
新手爬虫的时候换IP的必要性
请登录后发表评论
登录
全部评论
