通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

丛本质上来说，既然 background-image 属性中的渐变是浏览器生成的图片，可以使用其他CSS背景属性来控制它们，就像对待其他图片那样。比方说，可以使用 background-size 属性来控制渐变的尺寸， background-repeat 来控制是否将其平铺。
IE9之前的版本不支持渐变
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

1. linearGradient-线性渐变

语法：
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

• []表示一个字符类，这里，你可以理解为一个小单元。

• |表示候选。也就是“或者”的意思，要么前面的，要么就后面的。
• ?为量词，表示0个或1个，言外之意就是，你可以不指定方向，直- 接渐变色走起。例如：
  background:linear-gradient(red, yellow);
  就是从上往下的红黄条纹效果。
• +也是量词，表示1个或者更多个。因此，终止颜色是不可缺少的。例如：linear-gradient(red)是酱油命，白板。
• <>中的是关键字，主要是让开发人员知道这里应该放些什么内容。

1. angle

使用angles
参数释义如下，‘0deg’指向上面，同时正角度顺时针旋转，因此‘90deg’指向右边。这个角度与我们平时在ps中的角度是不一样的。在ps中，90deg的渐变是从上自下的。

渐变的角度 linear-gradient(__deg,#62C292 0%,#F8CBAD 100%)
角度坐标与位置关系
渐变的起点和终点（默认）在过中心的渐变线的垂直线上：

2. side-or-corner

可选值：
left, right, top, bottom, left top, left bottom, right top, right bottom. 分别表示，从左往右，从右往左，从上往下，从下往上，从左上往右下，从…
加前缀的浏览器可以直接写： left， right...
而标准语法要加 to ：to right, to left, to bottom, to top, to bottom left...

3.color-stop

颜色结点，语法：颜色值+空格+百分比或长度值。例如red 100px或者red 10%。
百分比或长度值: 表示距离起始点的长度。
例如：linear-gradient(to right, #62C292 0%, #F8CBAD 50%, #62C292 100%);

各参数代表的意思
效果

多个渐变颜色的实例:

使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

background: -webkit-linear-gradient(left, rgba(104,193,147,0), rgba(104,193,147,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(104,193,147,0), rgba(104,193,147,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(104,193,147,0), rgba(104,193,147,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(104,193,147,0), rgba(104,193,147,1)); /* 标准的语法（必须放在最后） */```

![](https://img.haomeiwen.com/i6084714/16b6218371ab8775.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
___
####更多栗子🌰：
**用渐变属性，制作两条装饰线。**

linear-gradient(
rgba(0,0,0,0) 10%,

62C292 10%,

62C292 14%,

rgba(0,0,0,0) 14%,
rgba(0,0,0,0) 86%,

62C292 86%,

62C292 90%,

rgba(0,0,0,0) 90%)

![各色块占比](https://img.haomeiwen.com/i6084714/7ff7e26e7291a929.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
rgba(0,0,0,0)-制作全透明的空白部分。用百分比来绘制色块所处的位置。

**颜色分三块**

background: linear-gradient(
#62C292 30%,
#F8CBAD 30%,
#F8CBAD 70%,
#62C292 70%)

![色块3](https://img.haomeiwen.com/i6084714/fdc16cbcae4c5ec1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**颜色分二块**

background: linear-gradient(
#62C292 50%,
#F8CBAD 50%
)

![色块2](https://img.haomeiwen.com/i6084714/a78ae5f05dcb6f89.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**背景纹理-1**

background: linear-gradient(
45deg,
rgba(0, 0, 0, 0) 10%,
rgba(0, 0, 0, 0.1) 10%,
rgba(0, 0, 0, 0.1) 90%,
rgba(0, 0, 0, 0) 90%),

    linear-gradient(
        white, white);    /*白色背景*/

    background-size:      /*背景尺寸*/
         50px 50px,
         cover;   /*白色背景*/

![背景纹理-1](https://img.haomeiwen.com/i6084714/de8d32503f3d1baa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**背景纹理-2**

background: linear-gradient(
45deg,
rgba(0, 0, 0, 0) 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
rgba(0, 0, 0, 0) 60%),

    linear-gradient(
        white, white);    /*白色背景*/

    background-size:      /*背景尺寸*/
         8px 8px,
         cover;   /*白色背景*/

![背景纹理-2](https://img.haomeiwen.com/i6084714/533eea19b79335e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
`background: repeating-linear-gradient( 45deg, #E6E6E6, #FFF 20%);
`

![](https://img.haomeiwen.com/i6084714/d5c46e932bb47ad8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)