css3实现背景渐变的方法

       

      我们一般实现背景渐变的方法都是用图片来实现，这段时间在做项目中找到了一种用css3用颜色实现背景渐变的方法，主要支持Firefox和Safari/Chrome 等浏览器，ie用滤镜的方法来解决渐变的问题：

      CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)，

  

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

             参数：第一个参数表示方向，可以是top,表示从上到下，left表示从左到右，left top 从左上角到右下角；第二个参数和第三个参数分别表示起点颜色和终点颜色，在里面也可以插入更多的参数颜色
可以写成background:-moz-lineat-gradient(top,#ccc,#000);

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

           参数：第一种的书写方法里的参数跟-moz-linear-gradinent的参数是一样的；
              第二种参数里的type表示的是渐变的类型，可以是linear渐变或者radia径向渐变；第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);

 

          参数：第一参数表示渐变的方向，第二个参数和第三个参数分别表示渐变颜色的起点和终点；

      在ie中解决渐变的方法主要是利用滤镜：

 

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+*/

        参数：IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。