CSS3之线性渐变(linear-gradient)

渐变包含两种：线性渐变和径向渐变，这里主要对线性渐变进行详细的讲解，下一篇详解径向渐变。

考虑到浏览器兼容性，线性渐变包含带有内核和不带内核的两种写法，也就导致了语法的多样性，下面会对不同语法进行一个总结。

不同浏览器有不同内核，针对不同浏览器设置一些样式的时候，我们需要加上其对应内核。在最后可以加上通用的写法。
火狐：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