第一段：线性渐变：linear-gradient
语法：
= linear-gradient([ [ | to = [left | right] || [top | bottom] = [ |]?下述值用来表示渐变的方向,可以使用角度或者关键字来设置： ：用角度值指定渐变的方向（或角度）. to top：设置渐变尘旁从下到上.相当于: 0deg 用于指定渐变的起止颜色： ：指定颜色. ：用长度值指定起止色位置.不允许负值 ：用百分比指定起止色位置. 示例： p { height: 100px; border: 1px solid #ddd000; } #LinearStartToEnd { float:left; background: linear-gradient(#ff0000, #00ff00); #LinearPercentage { #LinearAnglePercentage { #LinearAngle { #LinearTopRight { }第二段：径向渐变：radial-gradient = [ ① | ① | left | center① | right ]? [ ② | ② | top | center② | bottom ]? = circle | ellipse = |[||] = closest-side | closest-corner | farthest-side | farthest-corner = = | ①：用长度值指定径向渐变圆心的横坐标值.可以为负值. ①：用百分比指定径向渐变圆心的横坐标值.可以为负值. ②：用长度值指定径向渐变圆心的纵坐标值.可以为负值. ②：用百分比指定径向渐变圆心的纵坐标值.可以为负值. center①：设置中间为径向渐变圆心的横坐标值. center②：设置中间为径向渐变圆心的纵坐标值. left：设置左边为径向渐变圆心的横坐标值. right：设置右边为径向渐变圆心的横坐标值. top：设置顶部为径向渐变圆心的纵坐标值. bottom：设置底部为径向渐变圆心的纵坐标值. 确定圆的类型 circle：指定圆形的径向渐变 ellipse：指定椭圆形的径向渐变. circle | ellipse 都接受该值作为 size. closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边. closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角. farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边. farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角. circle 接受该值作为 size. ：用长度值指定正圆径向渐变的半径长度.不允许负值. ellipse 接受该值作为 size. ：用长度值指定椭圆径向渐变的横向或纵向半径长度.不允许负值. ：用百分比指定椭圆径向渐变的横向或纵向半径长度.不允许负值. #RadialCenterCircle { background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff); #RadialClosestSide { background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00); #RadialFarthestSide { #RadialRightTop { background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00); #RadialRadiusCenter { background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe); #RadialGroup { background: }第三段：重复的线性渐变：repeating-linear-gradient 语法和参数类似线性渐变,这里不在赘述.详情请参考CSS手册. #RepeatingLinearPercentage{ #RepeatingLinearRight { #RepeatingLinearAngle { #RepeatingLinearBottomLeft { }第四段：重复的径向渐变：repeating-radial-gradient 语法和参数类似径向渐变,这里不在赘述.详情请参考CSS手册. #RepeatingRadialCircle { #RepeatingRadialTopLeft { #RepeatingRadialClosestCorner { }完整的例子：