repeating

CSS3实现背景图⽚⾊彩的梯度渐变

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、radialgradients（径向梯度渐变）

从点开始，以圆的⽅式向外渐变。

样例：radial-gradients（点的位置，⾊彩，⾊彩，…）；

点的位置：（1）默认为center；

（2）坐标；

例：

radial-gradients（white,red）/（center，white,red）

radial-gradients（10%20%,white,red）/（10px20px,white,red）

3、repeatinggradients（重复梯度渐变）

完全相同的梯度语法，且整个渐变将被循环填充：

循环渐变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）/（10px20px,white,red）

tops（⾊站）

颜⾊可以在渐变中的设置停靠点；

如果不设置⾊站，颜⾊会默认平均分配；

例：

linear-gradient(left,red,green,blue)

当然如果你愿意，你还可以为个别颜⾊定位具体的停靠点，然后让浏览器分配其它剩余的：

例：

linear-gradient(topleft,red20px,yellow,green,blue90%)

渐变轴线可能是条对⾓线，那么百分⽐则相应对⾓线的长度。

颜⾊的停靠点相同会使颜⾊之间过渡强烈：

例：

linear-gradient(topleft,red,yellow,green50%,purple60%,blue)

这篇⽂章对你有帮助吗？作为⼀名程序⼯程师，在评论区留下你的困惑或你的见解，⼤家⼀起来交流吧！