从上到下

#grad {

background: -webkit-linear-gradient(red, blue);

background: -o-linear-gradient(red, blue);

background: -moz-linear-gradient(red, blue);

background: linear-gradient(red, blue);

}

从左到右

#grad {

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);

}

从左上到右下

#grad {

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);

}

使用角度

#grad {

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);

}

多种颜色节点

#grad {

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);

}

使用透明度

#grad {

background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));

background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));

background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

}

径向渐变

#grad {

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);

}

形状为圆形的径向渐变

#grad {

background: -webkit-radial-gradient(circle, red, yellow, green);

background: -o-radial-gradient(circle, red, yellow, green);

background: -moz-radial-gradient(circle, red, yellow, green);

background: radial-gradient(circle, red, yellow, green);

}

颜色不均匀中比需抖接朋功要朋插的径向渐变

#grad {

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);

background: -o-radial-gradient(red 5%, green 15%, blue 60%);

background: -moz-radial-gradient(red 5%, green 15%, blue 60%);

background: radial-gradient(red 5%, green 15%, blue 60%);

}

本文来源于网络：查看 >https://www.cnblogs.com/dej-11/p/7837332.html