1：基本概念

• 在两个或者多个指定的颜色之间显示平稳的过渡

• 渐变的效果是由浏览器天生的

• 渐变的类型主要分为两种：线性渐变（Linear Gradients）和径向渐变（Radial Gradients）；线性渐变是一个向上、向下、向左、向右或者对角偏向的渐变，而径向渐变则是由它们的中央界说。

• 作为米素的background-image（background）使用

2：浏览器的支持情形

由于它是一个对照新的属性，以是它在浏览器中使用时需要添加它的前缀，下面的图片是完全支持该属性的第一个浏览器版本：

差别厂商的浏览器的前缀也是不一样的，好比：

.header {
    /* Safari */
    background: -webkit-linear-gradient(red, blue);

    /* Opera */
    background: -o-linear-gradient(red, blue);

    /* Firefox */
    background: -moz-linear-gradient(red, blue);

    /* 尺度的语法, 放在最后 */
    background: linear-gradient(red, blue);
}

差别的浏览器厂商在实现这个尺度时也是略有差别的，好比关于偏向的界说，角度的界说，是顺时针照样逆时针。

3：线性渐变（Linear Gradients）

基本语法

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

在不添加角度和偏向的前提下，默认是从上到下

background: linear-gradient(color1, color2);

从左到右

to right/left/bottom/top
background:linear-gradient(to right,#147B96,#E6D205);

对角（需要把两个偏向相连系）

to right bottom/right top/left bottom/left top
background:linear-gradient(to bottom right,#147B96,#E6D205);

使用角度

background: linear-gradient(45deg, #147B96 , transparent);

多种颜色

background: linear-gradient(to right, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
background: linear-gradient(to right, #147B96, #E6D205 50px, #147B96 50px, #E6D205 50px, #147B96);

重复渐变

background: repeating-linear-gradient(to right, #147B96, #E6D205 5%, #147B96 10%, #E6D205 20%);

声明多个 - 逗号分开 - 最先声明优先级最高

background: linear-gradient(green 10px, transparent 10px),
            linear-gradient(90deg,green 10px, transparent 10px) repeat left top / 40px,
            linear-gradient(transparent 40px, green 4px);

4：径向渐变 (Radial Gradients)

基本语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

渐变中央，整个图形的中央点，既可以使用px，也可以使用%。

background-image: radial-gradient(0% 0%, red, green, blue);

渐变形状，主要是有两种：circle（圆形）和 ellipse（椭圆形）

background:radial-gradient(circle, red, green, blue);

渐变巨细

• closest-side - 渐变的半径长度为从圆心到离圆心最近的边

• closest-corner- 渐变的半径长度为从圆心到离圆心最近的角

• farthest-side- 渐变的半径长度为从圆心到离圆心最远的边

• farthest-corner - 渐变的半径长度为从圆心到离圆心最远的角

background:radial-gradient(circle at farthest-corner, red, green, blue);

渐变中央、渐变形状和渐变巨细这三个就是径向渐变的主要使用，除此之外，也可以和线性渐变一样使用多种颜色，重复渐变以及声明多个渐变。

这篇文章主要分享了Linear Gradients（线性渐变）与Radial Gradients（径向渐变）的基本概念, 先容了两种渐变的常用属性，最后连系了Linear Gradients实例先容了CSS3渐变在现实中的部门应用场景。

链接: http://www.fly63.com/article/detial/3800