1-从上往下线性渐变:
background: -webkit-linear-gradient(red,blue);
background: -o-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue);
2-从上往下线性渐变:
background: -webkit-linear-gradient(left,red,blue);
background: -o-linear-gradient(left,red,blue);
background: -moz-linear-gradient(left,red,blue);
3-对角线性渐变:
background: -webkit-linear-gradient(left top,red,blue);
background: -o-linear-gradient(left,red top,blue);
background: -moz-linear-gradient(left top,red,blue);
4-角度线性渐变:
background: -webkit-linear-gradient(45deg,red,blue);
background: -o-linear-gradient(45deg,red ,blue);
background: -moz-linear-gradient(45deg ,red,blue);
5-多中颜色线性渐变:
background: -webkit-linear-gradient(green,red,blue);
background: -o-linear-gradient(green,red ,blue);
background: -moz-linear-gradient(green ,red,blue);
6-透明线性渐变:
background: -webkit-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));
background: -o-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));
background: -moz-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));
7-重复线性渐变:
background: -webkit-repeating-linear-gradient(red ,green 20%,blue 20%);
background: -o-repeating-linear-gradient(rgba(red ,green 20%,blue 20%);
background: -moz-repeating-linear-gradient(red ,green 20%,blue 20%);
8-径向渐变--均匀分布:
background: -webkit-radial-gradient(red ,green);
background: -o-radial-gradient(red,green);
background: -moz-radial-gradient(red,green);
9-径向渐变--不均匀分布:
background: -webkit-radial-gradient(red 10% ,green 40%);
background: -o-radial-gradient(red 10% ,green 40%);
background: -moz-radial-gradient(red 10% ,green 40%);
