---恢复内容开始---
CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。
为了更好的应用 CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，
主要有 Mozilla（Firefox，Flock等）、WebKit（Safari、Chrome等）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）。
本文照常忽略IE不管，我们主要看看在 Mozilla、Webkit、Opera 下的应用，当然在 IE 下也可以实现，他需要通过 IE 特有的滤镜来实现，在后面会列出滤镜的使用语法，但不会具体介绍如何实用，感兴趣的可以搜索相关技术文档。
1.Mozilla浏览器
-moz-linear-gradient有三个参数。
第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。
第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
background: -moz-linear-gradient( top,#ccc,#000);/* Firefox */
2.WebKit浏览器
-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。
第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。
第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。
第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));
新式写法：
background: -webkit-linear-gradient(top, #CCC,#000 ; /* Chrome10-25,Safari5.1-6 */
3.opera浏览器
-o-linear-gradient 有三个参数。第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。（注：Opera 支持的版本有限，本例测试都是在 Opera11.1 版本下，后面不在提示）
background: -o-linear-gradient(top,#ccc, #000);
4.IE浏览器
IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr 表示终点颜色。GradientType 表示渐变类型，0 为缺省值，表示垂直渐变，1 表示水平渐变
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
示例
从上到下的渐变
background: -webkit-linear-gradient(green, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(green, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(green, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(green, blue); /* 标准的语法（必须放在最后） */
从左到右
background: -webkit-linear-gradient(left, green , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, green, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, green, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, green , blue); /* 标准的语法（必须放在最后） */
左上到右下
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */
使用多个颜色节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #grad1 { height: 200px; background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, green, blue); /* 标准的语法（必须放在最后） */ } #grad2 { height: 200px; background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */ background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */ } #grad3 { height: 200px; background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */ background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */ } </style> </head> <body> <h3>3 个颜色结点（均匀分布）</h3> <div id="grad1"></div> <h3>7 个颜色结点（均匀分布）</h3> <div id="grad2"></div> <h3>3 个颜色结点（不均匀分布）</h3> <div id="grad3"></div> <p><strong>注意：</strong> 当未指定百分比时，颜色结点不会自动均匀分布。</p> <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p> </body> </html>
颜色渐变透明
透明渐变对于制作一些特殊的效果是相当有用的，例如，当堆叠多个背景时。这里是两个背景的结合：一张图片，一个白色到透明的线性渐变。我们来看一个官网的示例吧：
---恢复内容结束---