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”：

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

三、备注 语法使用

// 从上到下
background-image: linear-gradient(red , yellow);
或者
background-image: linear-gradient(to bottom, red , yellow);
// 从左到右
background-image: linear-gradient(to right, red , yellow);