线性渐变的实例：
1.从上到下的线性渐变：
.box {
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}
2.从左到右的线性渐变：
.box {
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
3.从左上角到右下角的线性渐变：
.box{
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
4.带有指定的角度的线性渐变：
.box{
background: -webkit-linear-gradient(180deg, red, blue);
background: -o-linear-gradient(180deg, red, blue);
background: -moz-linear-gradient(180deg, red, blue);
background: linear-gradient(180deg, red, blue);
}
5.带有多个颜色结点的从上到下的线性渐变：
/*横向颜色*/
.box {
background: -webkit-linear-gradient(red, green, blue);
background: -o-linear-gradient(red, green, blue);
background: -moz-linear-gradient(red, green, blue);
background: linear-gradient(red, green, blue);
}
/*竖向颜色*/
.box {
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
/*重复的线性渐变*/
.box {
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
6.径向渐变:
.box {
background: -webkit-radial-gradient(red, green, blue);
background: -o-radial-gradient(red, green, blue);
background: -moz-radial-gradient(red, green, blue);
background: radial-gradient(red, green, blue);
}