CSS3渐变色彩linear-gradient和radial-gradient

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

语法：

linear-gradient([渐变方向], [颜色], [颜色],···);

①渐变方向 0deg(角度)等同于to top从下向上渐变;

②渐变方向 90deg(角度)等同于to right从左向右渐变;

③渐变方向 180deg(角度)等同于to bottom从上向下渐变;

④渐变方向 270deg(角度)等同于to left从右向左渐变;

⑤渐变方向 270deg(角度)等同于to top left从右下角向左上角渐变;

⑥渐变方向 315deg(角度)等同于to top right从左下角向右上角渐变

代码示例：

div{

width:200px;

height:200px;

background-image:linear-gradient(to left,red,orange,yellow,green,blue,indigo,violet)

}

效果如下：

语法：

radial-gradient([颜色], [颜色],···);

代码示例：

div{

width:200px;

height:200px;

background-image:radial-gradient(red,orange,yellow,green,blue,indigo,violet)

}

效果如下：