摘要：
径向渐变：重复线性渐变：重复直线渐变：左（对应于270deg）-颜色点：颜色点2，默认值为中心；这个参数可以省略-颜色点：例如red0%，green50%div（width:blue）；
渐变语法：使用background-image属性进行设置
可以取值： linear-gradient:线性渐变
radial-gradient:径向渐变
repeating-linear-gradient:重复线性渐变
repeating-radial-gradient:重复径向渐变
线性渐变
linear-gradient(angle,color-point1,color-point2,...)
—angle:指定渐变的方向，可以是角度值，也可以是关键词，如to top(对应0deg),to right(对应90deg),to bottom(对应180deg),to left(对应270deg)
—color-point:表示颜色的起始点，中间点，或是结束点，取值为颜色和位置的组合，如red 0%、green 50%
径向渐变
radial-gradient([size at position],color-point1,color-point2,...)
—position:指定渐变的圆心位置，默认值为center;可以取值为数值、百分比或关键字;此参数可以省略
—color-point:表示颜色的起始点，中间点，或是结束点，取值为颜色和位置的组合，如red 0%、green 50%
div{ width:400px; height:300px; border:1px solid black; } #d1{ background-image:radial-gradient(red,blue);
}
#d2{ background-image:radial-gradient(200px at left top,red,blue); }
重复线性渐变、重复径向渐变
参数分别与线性渐变和径向渐变相同
div{ width:400px; height:300px; border:1px solid black; background-image:repeating-linear-gradient(to top,#fff,#f9f9f9 10px,#ccc 50px); }
div{ width:400px; height:300px; border:1px solid black; background-image:repeating-radial-gradient(50px at center,red 0px,green 20px,orange 50px); }
浏览器兼容性(目前，各浏览器的新版本均支持渐变属性)
对于不支持的版本
—Firefox需要前缀-moz-
—Chrome和Safari需要前缀-webkit-
—Opera需要前缀-o-
应用案例 #d1{ background-image:linear-gradient(to bottom,red,#fff); background-image:-moz-linear-gradient(to bottom,red,#fff); background-image:-webkit-linear-gradient(to bottom,red,#fff); background-image:-o-linear-gradient(to bottom,red,#fff);
}