代码:

效果:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}/*2个色的渐变*/.box{width: 600px;height: 100px;background:linear-gradient(to right, red ,green);}/*2个色的突变*/.box2{width: 600px;height: 100px;background:linear-gradient(to right,red 50%,green 50%);}/*3个色的渐变*/.box3{width: 600px;height: 100px;background:linear-gradient(to right,red,green,blue);}/*3个色的突变*/.box4{width: 600px;height: 100px;background:linear-gradient(to right,red   0,red   33.333%,green 33.333%,green 66.666%,blue  66.666%,blue  100%);}</style></head><body><div class="box"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body></html>

总结:

1 按此规律，多个色块的突变一样可以实现出来

2 第一个参数可以为: to right , to left , to bottm ,to top

3 第一个参数还可以为角度: 120deg。度数增大，顺时针旋转，度数减小，逆时针旋转

该效果是：