线性渐变 `-webkit-linear-gradient`

线性渐变 -webkit-linear-gradient

.header-box {
  background-image: -webkit-linear-gradient(#000, #121212);
  
  background-image: linear-gradient(#000, #121212);
}

• 参数：-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

• **[css3渐变之linear-gradient与-webkit-linear-gradient写法异同]**区别：

background: linear-gradient(direction, color-stop1, color-stop2, …);

通常只需要linear-gradient，兼容性较好。但iphone5的ios6系统下，linear-gradient不识别，需要加上-webkit-linear-gradient。

linear-gradient和-webkit-linear-gradient的用法是有很大区别的，千万别以为只是多了一个-webkit。
主要是第一个参数direction。前者需要使用“to bottom”，而后者是“bottom”，不能加“to”：
.im-item .im-mask {
background:linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.6));
background:-webkit-linear-gradient(bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.6));
}

使用角度时也不一样，前者0deg表示从下到上，而后者0deg表示从左到右。如：
background: linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));

如果第一个参数省略，那么两者都表示从上到下，这点倒是相同：
background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));