1.linear-gradient(angle, color-point1 ,color-point2......); 线性渐变
angle:指渐变的方向,可以是角度值,也可以是方向,to top(对应角度0deg),to right(90deg),to bottom(180deg),to left(270deg)
color-point:表示颜色的起始点,中间点或者结束点,取值为颜色和位置的结合,如red30%, yellow70%
具体如下:background-image:linear-gradient(90deg, yellow 30%,red 70%)/(to right,yellow 60px, red 120px)
注意:后面的颜色要大于前面颜色的值如上面的70%>30%,不然的话不会产生渐变。
2.radial-gradient(size at position, color-point1 ,color-point2...);径向渐变
size at position:指定渐变的圆心位置,默认为center,可以取值数值,百分比,关键字,可省略。
如:background-image:radial-gradient(200px at left bottom,green 40%,red 60%);
球:
background-image:radial-gradient(200px at right top,white,#047)
}
3.repeating-linear-gradient(angle,color-point1,color-point2...);重复线性渐变
具体:background-image:repeating-linear-gradient(to top,red 0%,yellow 30%);注意,后面的值大于前面且相加小于100%
4.repeating-radial-gradient();重复径向渐变
5.有兼容问题,如ie8不能使用。