一、基本使用方式
Webkit Linear Gradient的基本代码如下：
background: -webkit-linear-gradient(direction, color-stop1, color-stop2, ...);
其中direction表示渐变的方向，可以是关键词top、left、right、bottom，也可以是一定角度的数值，例如45deg表示从左下到右上。color-stop表示渐变的颜色点，可以有多个，每个颜色点由一个颜色值和对应的位置构成。
例如，我们使用下面的代码设置一个从左上角到右下角的渐变颜色：
background: -webkit-linear-gradient(left top, #FFAFBD, #ffc3a0);
效果如下图：
二、多个颜色点与颜色模式
在Webkit Linear Gradient中，可以通过添加多个颜色点，来实现更加复杂的渐变效果。
例如，我们使用下面的代码设置一个从左边到右边渐变，并垂直划分为三段颜色的效果：
background: -webkit-linear-gradient(left, #FFAFBD 0%, #ffc3a0 40%, #FFAFBD 70%, #ffc3a0 100%);
效果如下图：
在多个颜色点中，我们可以加入颜色的模式（color-stop），控制颜色渐变的方式。
例如，我们使用下面的代码设置一个从左到右色彩分明、边缘清晰的线性渐变：
background: -webkit-linear-gradient(left, #00bcd4 0%, #00bcd4 25%, #49c1a2 25%, #49c1a2 50%, #F5B041 50%, #F5B041 75%, #E74C3C 75%, #E74C3C 100%);
效果如下图：
三、径向渐变
Webkit Linear Gradient不仅可以实现线性的渐变效果，还可以实现径向的渐变效果。
使用下面的代码，我们可以实现一个由内而外逐渐变暗的渐变效果：
background: -webkit-radial-gradient(50% 50%,ellipse cover, #FFAFBD, #ffc3a0);
效果如下图：
