在以前遇到渐变的背景，我们只能选择使用，而现在通过 gradients 这个就可以实现颜色的渐变。它的实现是通过浏览器的，可以当成是矢量图形。学会它只需要几个字符就可以很大的渐变图形。

不过值得注意的是虽然它是颜色，但是使用它之后就不能再使用背景了。

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间平稳的过渡。

以前，你必须使用图像来实现这些。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变的元素在放大时看起来更好，因为渐变（gradient）是由浏览器的。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义。

这个可以通过写一些参数来渐变图形，例如从黄色渐渐的过度到红色，以前的实现方式这可以是径向渐变，也可以是线性渐变。的这个渐变图形在放大或缩小的时候都不会失真，因为它是由浏览器模拟的，就和我们使用矢量图是一样的。

线性渐变：顾名思义颜色的变化规律是沿着一条直线，它可以是各个方向上面的线。

.demo{
    background: linear-gradient(direction|angle, color-stop, color-stop, );
}

说明

说明：创建线性渐变至少需要两个颜色，他们的认方向是从上到下的。

使用角度可以创建更细腻的渐变。但要注意的是：这个角度值得是水平方向和渐变线之角度。0度从下到上 90度从左到右，这样顺时针的变化。

.demo{
    background-image: radial-gradient(shape size at position, start-color, , last-color);
}

说明

说明： 径向渐变同样可以省略 shape size at position ，这样认就是圆形的径向渐变，中心点在元素的中心点位置。 每个颜色后面可以跟表示长度的数值 % px rem 等，用来表示颜色的覆盖区域，大于这个数值则开始径向渐变。

<div class="demo"></div>

.demo{
    width: px;
    height: px;
    background: linear-gradient(red,green);
}

图

如果渐变方向正好是上下方向，那么只要写两个颜色就好了。

 .demo{
    width: px;
    height: px;
    background: linear-gradient(red ,green);
}

图

这个的实现只要在颜色后面加 % 数就好，也可以是其他的计量单位例如 px。

 .demo{
    width: px;
    height: px;
    background: linear-gradient(to right,red ,green);
}

图

 .demo{
    width: px;
    height: px;
    background: linear-gradient(to right bottom,red,green);
}

图

这里的 to right bottom 也可以写成 right bottom 。

 .demo{
    width: px;
    height: px;
    background: linear-gradient(deg,red,green);
}

图

 .demo{
    width: px;
    height: px;
    background: linear-gradient(deg,red,green);
}

图

.demo{
    width: px;
    height: px;
    background:radial-gradient(red,green);
}

图

说明：渐变认形状是椭圆形，但是如果在宽度和高度相等的元素内则会变成圆形，但是其实还是椭圆的，只是看到的像圆形，这是因为两个中心点重合了。

.demo{
    width: px;
    height: px;
    background:radial-gradient(red,green);
}

说明：这不是真的圆形如果宽度和高度不相等则变成椭圆的。

.demo{
    width: px;
    height: px;
    background:radial-gradient(circle,red,green);
}

.demo{
    width: px;
    height: px;
    background:repeating-radial-gradient(circle,red ,green );
}

图

.demo{
    width: px;
    height: px; 
    float: left;
    margin-right: px;;  
}
.demo0{
    background-image: radial-gradient( red, green);
}
.demo1{
    background-image: radial-gradient(closest-side , red, green);
}
.demo2{
    background-image: radial-gradient(farthest-side , red, green);
}
.demo3{
    background-image: radial-gradient(closest-corner , red, green);
}
.demo4{
    background-image: radial-gradient(farthest-corner , red, green);
} 

图

说明：从左到右依次为：认 closest-side farthest-side closest-corner farthest-corner,可以清楚的观察到渐变的中心点都是元素的中心点，当时他们的过度点出现了明显的不同。

.demo{
    width: px;
    height: px; 
    background-image: radial-gradient( at top left,red, green);
}

图

说明，也可以是 单位例如

 background-image: radial-gradient( at  ,red, green);

我们可以把它理解为坐标。

(left,circle,red 10%,yellow 50%,green 50%)

left 前面一定要 at 不然它的兼容性很不好。

使用渐变背景色可以是 background 也可以是 background-image 但不要写成 background-color 。

设置了渐变背景色就不能在用元素内在使用了如果想叠加可以像下面这样的结构：

<div class="demo">
    <div class="demo-img"></div>
</div>

通过在内部新建来引用你想插入的，并通过定位来达到想要的。

渐变因为不兼容 IE8 浏览器，所以在使用这个的时候好降级处理。例如可以在 IE8 使用纯色，或者通过代替，而非 IE8 在使用渐变，这也可以通过 JS 判断环境。