Css3渐变
CSS3渐变
渐变分为线性渐变和径向渐变，所谓渐变就是几种颜色之间的平稳过渡。在创建渐变的过程中，可以指定多个中间颜色值，这个值称为色标。每个色标包含一种颜色和一个位置，浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变。
CSS3渐变可以应用于任何使用背景图片的地方。这意味着在CSS样式中，渐变相当于背景图片，在理论上可在任何使用url() 值的地方采用，比如最常见的background-image、list-style-type以及前面介绍的CSS3的图像边框属性border-image。但直到目前为止，仅在背景图片中得到最完美的支持。
线性渐变
线性渐变，首先需要指定一个渐变的方向、渐变的起始颜色、渐变的结束颜色。具有这三个参数就可以制作一个最简单、最普通的渐变效果。如果你需要制作一个复杂的多色渐变效果，就需要在同一个渐变方向增添多个色标。具备这些渐变参数（至少三个），各浏览器就会绘制与渐变线垂直的颜色结来填充整个容器。浏览器渲染出来的效果就类似于制作软件设计出来的渐变图像，从一种颜色到另一种颜色的平滑淡出，沿所指的线性渐变方向实现颜色渐变效果。
线性渐变的语法和参数
线性渐变的语法相对于其他的CSS3属性的语法而言要复杂的多。早期的语法在各浏览器内核下其语法尽不相同，特别是在Webkit内核之下还分新旧两种版本。接下来我们先从各浏览器下的语法入手，开始介绍CSS3的线性渐变语法。
1、 Webkit引擎的CSS3线性渐变语法与属性参数
Webkit是第一个支持CSS3渐变的浏览器引擎，不过其语法也相对其他浏览器引擎复杂，还分为新旧两个版本。
Webkit引擎老式语法
-webkit-gradien(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)
Webkit引擎新式语法
-webkit-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)
Webkit引擎渐变属性参数
-webkit-gradient是webkit引擎对渐变的实现一共有五个参数。
- 第一个参数表示渐变类型（type），可以是线性渐变linear或者径向渐变radial。
- 第二个参数和第三个参数，都是一对值，分别表示渐变的起点位置和终点位置。这对值可以用坐标形式表示，也可以用关键值表示，比如left top(左上角)和left bottom(左下角)。
- 第四个和第五个参数，分别是两个color-stop函数（色标）。color-stop函数接受两个参数，第一个表示渐变的位置，0表示起点，0.5为中点,1为结束点；第二个表示该点的颜色。
如下图所示:
2、 Gecko引擎的CSS3的线性渐变语法与属性参数
Gecko引擎的浏览器Firefox在3.6版本就开始支持CSS3的线性渐变属性。Gecko引擎与Webkit引擎的新版本渐变设计时用法基本相同，只是使用的私有前缀不同。
Gecko引擎的渐变语法
-moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)
Gecko引擎的渐变属性参数
在Gecko引擎的渐变中共有三个参数
- 第一个数数表示线性渐变的方向，例如:top是从上到下、left是从左到右。如果定义成left top，那就是从左上角到右下角。
- 第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
如图所示：
3、 Presto引擎的CSS3线性渐变语法与属性参数
Presto引擎的Opera浏览器在11.6版本开始就支持CSS3的线性渐变。在Presto引擎浏览器中CSS3线性渐变的使用语法和Gecko引擎浏览器中的线性渐变的语法非常类似，唯一不同的就是在Presto引擎浏览器中需要使用其自己的私有前缀为“-o-”。
Presto引擎的线性渐变语法
-o-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)
Presto引擎的线性渐变的属性参数
-o-linear-gradient也具有三个参数
- 第一个参数表示线性渐变的方向，top表示从上到下，left表示从左到右，如果定义成left top表示从左上角到右下角。
- 第二个和第三个参数分别是起点颜色和结束颜色。还可以在它们之间插入更多的参数，表示多种颜色的渐变。
如图所示：
4、 Trident引擎的CSS3线性渐变语法与属性参数
Trident引擎的浏览器主要有IE，早期版本的IE浏览器是不支持CSS3线性渐变的属性，不过在其IE10开始支持了这个属性。在这里我们主要针对IE10＋浏览器的CSS3线性渐变进行简单的介绍。
Trident引擎的CSS3线性渐变语法
-ms-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)
Trident引擎的CSS3线性渐变属性参数
-ms-linear-gradient属性参数和-moz-linear-gradient以及-o-linear-gradient的属性参数是一样的，这里就不在进行重复性的介绍。
5、 W3C标准线性渐变语法与属性参数
W3C组织于2012年04月发布了CSS3线性渐变的CR版本（候选人推荐版本）。这一次发布的CSS3渐变属性有着很大的变化，使用语法较前面的版本要简单多，容易理解的多。最让大家感到高兴的是，到写本文的时候，所有现代浏览器都支持W3C的标准语法，包括曾经令人讨厌的IE浏览器，也在IE10中支持了标准语法。
W3C标准线性渐变语法
linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)
W3C标准线性渐变属性参数
W3C标准线性渐性语法包括三个主要属性参数：第一个参数指定了渐变的方向，同时决定了渐变颜色的停止位置。这个参数值可以省略，当省略不写的时候其取值为“to bottom”。在决定渐变的方向主要有两种方法：
- <angle>：通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示渐变方向从左向右。如果取值为下值，其角度按顺时针方向旋转。
- 关键词：通过关键词来确定渐变的方向。比如“to top”、“to right”、“to bottom”和“to left”。这些关键词对应的角度值为“0deg”、“90deg”、“180deg”和“270deg”。除了使用“to top”、“top left”之外，还可以使用“top left”左上角到右下角、“top right”左上角到右下解等。
- 第二个和第三个参数，表示颜色的起始点和结束点。大家可以在从中插入更多的颜色值。
线性渐变的基本用法
颜色从上到下：
.box{
width: 200px;
height: 200px;
text-align: center;
color: #000;
line-height: 200px;
border: 1px solid black;
margin: 20px auto;
}
.toBottom{
background-image: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(yellow), to(blue));
background-image: -webkit-linear-gradient(top, yellow, blue);
background-image: -webkit-linear-gradient(270deg, yellow, blue);
background-image: linear-gradient(to bottom, yellow, blue);
background-image: linear-gradient(180deg, yellow, blue);
}
颜色从下到上：
.toTop{
background-image: -webkit-gradient(linear, left bottom, left top, from(yellow), to(blue));
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(yellow), to(blue));
background-image: -webkit-linear-gradient(bottom, yellow, blue);
background-image: -webkit-linear-gradient(90deg, yellow, blue);
background-image: linear-gradient(to top, yellow, blue);
background-image: linear-gradient(0deg, yellow, blue);
}
颜色从左到右：
.toRight{
background-image: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(yellow), to(blue));
background-image: -webkit-linear-gradient(left, yellow, blue);
background-image: -webkit-linear-gradient(0deg, yellow, blue);
background-image: -webkit-linear-gradient(360deg, yellow, blue);
background-image: linear-gradient(to right, yellow, blue);
background-image: linear-gradient(90deg, yellow, blue);
}
颜色从右到左：
.toLeft{
background-image: -webkit-gradient(linear, right top, left top, from(yellow), to(blue));
background-image: -webkit-gradient(linear, 100% 0, 0 0, from(yellow), to(blue));
background-image: -webkit-linear-gradient(right, yellow, blue);
background-image: -webkit-linear-gradient(180deg, yellow, blue);
background-image: linear-gradient(to left, yellow, blue);
background-image: linear-gradient(270deg, yellow, blue);
}
颜色从左下角到右上角：
.toRightTop{
background-image: -webkit-gradient(linear, left bottom, right top, from(yellow), to(blue));
background-image: -webkit-gradient(linear, 0 100%, 100% 0, from(yellow), to(blue));
background-image: -webkit-linear-gradient(left bottom, yellow, blue);
background-image: -webkit-linear-gradient(45deg, yellow, blue);
background-image: linear-gradient(to right top, yellow, blue);
background-image: linear-gradient(45deg, yellow, blue);
}
颜色从左上角到右下角：
.toRightBottom{
background-image: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(yellow), to(blue));
background-image: -webkit-linear-gradient(left top, yellow, blue);
background-image: -webkit-linear-gradient(315deg, yellow, blue);
background-image: linear-gradient(to right bottom, yellow, blue);
background-image: linear-gradient(135deg, yellow, blue);
}
颜色从右下角到左上角：
.toLeftTop{
background-image: -webkit-gradient(linear, right bottom, left top, from(yellow), to(blue));
background-image: -webkit-gradient(linear, 100% 100%, 0 0, from(yellow), to(blue));
background-image: -webkit-linear-gradient(right bottom, yellow, blue);
background-image: -webkit-linear-gradient(135deg, yellow, blue);
background-image: linear-gradient(to left top, yellow, blue);
background-image: linear-gradient(315deg, yellow, blue);
}
颜色从右上角到左下角：
.toLeftBottom{
background-image: -webkit-gradient(linear, right top, left bottom, from(yellow), to(blue));
background-image: -webkit-gradient(linear, 100% 0, 0 100%, from(yellow), to(blue));
background-image: -webkit-linear-gradient(right top, yellow, blue);
background-image: -webkit-linear-gradient(225deg, yellow, blue);
background-image: linear-gradient(to left bottom, yellow, blue);
background-image: linear-gradient(225deg, yellow, blue);
}
更多颜色：
.moreColor{
background-image: linear-gradient(to right, yellow, blue, red, green);
width: 300px
}
颜色比例：
.gredientScale{
background-image: linear-gradient(to right, yellow 10%, blue 30%, red 80%, green 100%);
width: 300px
}
来源：
http://www.w3cplus.com/css3/new-css3-linear-gradient.html
http://blog.csdn.net/h15882065951/article/details/60139494
http://www.jcodecraeer.com/a/cssjiqiaoyuguifan/2012/0811/341.html
径向渐变
CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。
.radialWebkitGradient{
background-image: -webkit-gradient(radial, center center,0,center center, 143, from(yellow), color-stop(33%,blue), color-stop(65%,red), to(green));
}
.radialGradient{
background-image: -webkit-radial-gradient( yellow, blue, red, green);
background-image: radial-gradient( yellow, blue, red, green);
}
如果对径向渐变有兴趣，可以查看下面的文档：