1.linear gradients（线性梯度渐变）
从起始线开始，一层一层的渐变。
样例：linear-gradient（方向，色彩，色彩，…）；
方向：（1）具体方向：top，left等；
（2）角度方向：30deg等（角度按逆时针方向旋转，0度时为从左向右方向）；
（3）默认从上到下；
例：
linear-gradient(left, white, red)
linear-gradient(30deg, white, red)
linear-gradient(white, red)
2、radial gradients（径向梯度渐变）
从点开始，以圆的方式向外渐变。
样例：radial-gradients（点的位置，色彩，色彩，…）；
点的位置：（1）默认为center；
（2）坐标；
例：
radial-gradients（white, red）/（ center，white, red）
radial-gradients（10% 20%, white, red）/（10px 20px, white, red）
3、repeating gradients（重复梯度渐变）
完全相同的梯度语法，且整个渐变将被循环填充：
循环渐变 repeating-linear-gradient()和repeating-radial-gradient()；
样例：repeating-linear-gradient（方向，色彩，色彩，…）；
repeating-radial-gradient（点的位置，色彩，色彩，…）；
梯度两端色彩将被循环用于调整他们首尾相连。
例：
repeating-linear-gradient(left, white, red)
repeating-linear-gradient(30deg, white, red)
repeating-linear-gradient(white, red)
repeating-radial-gradients（white, red）/（ center，white, red）
repeating-radial-gradients（10% 20%, white, red）/（10px 20px, white, red）
5.Color Stops（色站）
颜色可以在渐变中的设置停靠点；
如果不设置色站，颜色会默认平均分配；
例：
linear-gradient(left, red, green, blue)
当然如果你愿意，你还可以为个别颜色定位具体的停靠点，然后让浏览器分配其它剩余的：
例：
linear-gradient(top left, red 20px, yellow, green, blue 90%)
渐变轴线可能是条对角线，那么百分比则相应对角线的长度。
颜色的停靠点相同会使颜色之间过渡强烈：
例：
linear-gradient(top left, red, yellow, green 50%, purple 60%, blue)
这篇文章对你有帮助吗？作为一名程序工程师，在评论区留下你的困惑或你的见解，大家一起来交流吧！
