渐变包含两种：线性渐变和径向渐变，这里主要对线性渐变进行详细的讲解，下一篇详解径向渐变。
考虑到浏览器兼容性，线性渐变包含带有内核和不带内核的两种写法，也就导致了语法的多样性，下面会对不同语法进行一个总结。
不同浏览器有不同内核，针对不同浏览器设置一些样式的时候，我们需要加上其对应内核。在最后可以加上通用的写法。
火狐：moz
谷歌，safari： webkit
opera：op
ie：ms
1 首先我们看看带有内核的语法，这里以webkit为例，其它的内核都是一样的语法。
（带内核）线性渐变：
语法：
-webkit-linear-gradient(方向,颜色 位置,颜色 位置);
示例：
background: -webkit-linear-gradient(90deg,red 40%,yellow 50%,green 80%);
参数解析：
其中位置的百分比指的是颜色结束渐变的位置。
方向取值：top，bottom left等／0deg（如果不写默认为270deg／top），方向前面不要加to。
带内核代码：
.a{
/* 从0到40%为红色，40%到50%为红色到黄色的渐变，50%到80%为黄色到绿色的渐变，80%到100%为绿色 */
background: -webkit-linear-gradient(90deg,red 40%,yellow 50%,green 80%);
/* background: -webkit-linear-gradient(left bottom,red 40%,yellow 50%,green 80%); */
/* background: -webkit-linear-gradient(top,red 40%,yellow 50%,green 80%); */
}
三种效果图分别如下：
对比图.png
2 线性渐变的通用写法（不带内核的线性渐变）
（不带内核）线性渐变
语法：
-webkit-linear-gradient(方向,颜色 位置,颜色 位置);
示例：
background: linear-gradient(to top,white 0%,red 100%);
参数解析：
方向：如果是采用left等英语单词需要加to，表示到哪里结束。
如果采用角度，不需要加to。
不带内核代码
.b{
/* background: linear-gradient(300deg,white 0%,red 100%); */
background: linear-gradient(to left bottom,white 0%,red 100%);
}
两种效果图对比如下：
对比图2.png
