CSS实现兼容性的渐变背景(gradient)效果

一、IE系列
  
（1）语法：

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);

（2）参数：

opacity表示透明度，finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。

style用来指定透明区域的形状特征：
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。

startx 渐变透明效果开始处的 X坐标。

starty 渐变透明效果开始处的 Y坐标。

finishx 渐变透明效果结束处的 X坐标。

finishy 渐变透明效果结束处的 Y坐标。

startcolorstr：起始颜色。
endcolorstr：结束颜色。

gradientType：gradientType=0代表纵向渐变，其中gradientType=1代表横向渐变。
 
 例1：IE8中的效果：

  

 .gradient{ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#127c79', endColorstr='#73aeab',GradientType=0 );}

<div class="gradient"></div>

二、Firefox系列

（1）Firefox支持两种类型的CSS渐变：线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。

（2）线性的(-moz-linear-gradient)

   1）语法：

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

   2）参数：

   a.起始点(Starting Point)：起点的工作方式类似于background position。您可以设置水平和垂直位置为百分比，或以像素为单位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置，它将默认为center。
 
  例2：垂直渐变
  效果图：
  

  代码：
  .linear_gradient_square {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background: -moz-linear-gradient(top, blue, white);}

  例3：水平渐变
  效果图：
  

  代码：
  background: -moz-linear-gradient(left, blue, white);

  例4：从左上角开始的渐变
  效果图：
  

  代码：
  background: -moz-linear-gradient(left top, blue, white);

  b.角度(Angle)：正如您在上面看到的，如果您不指定一个角度，它会根据起始位置自动定义。如果你想更多的控制渐变的方向，您不妨设置角度试试。
   当指定的角度，请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。

  例5：
  效果图：
  

  代码：
  background: -moz-linear-gradient(<angle>, red, white);

  c.起止颜色(Color Stops)：除了起始位置和角度，你应该指定起止颜色。起止颜色是沿着渐变线，将会在指定位置（以百分比或长度设定）含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置，0％代表起点和100％是终点，但区域外的值可以被用来达到预期的效果。

  例6：
  效果图：
  

  代码：
  background: -moz-linear-gradient(top, blue, white 80%, orange);

  例7：
  效果图：
  

  代码：
  background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

  d.透明度(Transparency)：还支持透明渐变。这是相当有用的，例如，当堆叠多个背景时。这里是两个背景的结合：一张图片，一个白色到透明的线性渐变。

  例8：
  效果图：
  

  代码：
  .multibackground_transparent {
    background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url( http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg );
}

三、chrome&safari系列

（1）在webkit核心浏览器下(Safari4+, Chrome)，有两种类型的渐变，线性的和径向的。

（2）语法：
-webkit-gradient(type, start_point, end_point, / stop...)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)

（3）参数：

 参数 具体说明：
  
  1）start_point和end_point
  

  start_point(x1,x2)，end_point(x2,y2)，这里的x,y对应左上角为起点的坐标，此处的x,y参数表示与CSS中的background-position是一致的，可以使像素值，或是百分比值或是left,top,right,bottom。

  2）stop
  color-stop()我的理解就是过渡点，这些过渡点有两个参数，一个是点的位置，另外一个是过渡点的颜色。这些参数的示意也可以在photoshop之类的软件渐变编辑器中找到对应的位置。

  我们会见到类似下面的代码片段，color-stop(0.5, #ff0000)所表示的意思是在渐变过渡进程的中心位置(50%的位置)有个颜色为#ff0000（红色）的过渡色。

（4）创建线性渐变
 
   1）最简单的线性渐变
        .linear{width:130px; height:130px; border:1px solid green; padding:10px; background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)); -webkit-background-origin:padding; -webkit-background-clip:content;}

<div class="linear"></div>

  2）线性渐变的基本语法
       参见上面的background属性值，可以得到webkit核心浏览器下线性渐变的基本语法，如下：
      -webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值), [color-stop(位置偏移-小数,停靠颜色值),...],to(结束颜色值));

（5）创建径向渐变
         径向渐变也可以称为放射状渐变，常用来形成环状效果，晕状效果等。如下示例代码：
         .radial{
    display:block;
    width:150px;
    height:150px;
    border:1px solid blue;
    background-image:-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
        -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
        -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
        -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
}

<div class="radial"></div>

  效果图：
  

（6）指定过渡颜色点

         即使用color-stop方法创建色标点。含有两个参数，第一个参数表示渐变点的在整个渐变范围内的位置，以小数表示；第二个参数为颜色，可以使用RGBA的形式表示，这样可以指定颜色的透明度。

        使用color-stop指定过渡点或称为色标点时，渐变的开始(from())以及结束(to())颜色都是可以省略的。您可以参见下面的实例，第一个有from()以及end()的渐变，第二个没有from()以及stop()。

 1）使用from()以及to()方法
background: -webkit-gradient(linear, left top, left bottom, from(#ff0), color-stop(0.5, orange), to(rgb(255, 0, 0)));

效果图：

2）不指定起始颜色与结束颜色
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.40, #ff0), color-stop(0.5, orange), color-stop(0.60, rgb(255, 0, 0)));

效果图：

3）多个过渡点在同一位置
 background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

效果图：

（7）创建背景重复渐变

CSS3中有个background-size属性，可以改变背景图片的大小，配合背景渐变属性可以实现重复的背景渐变，如下代码：

width:400px; height:150px; background:-webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffff00)); -webkit-background-size:0 20px;

效果图：