css兼容浏览器的各种背景渐变

需要兼容各浏览要注意的是:必须加上浏览器的私有前缀。否则一般都是不生效的，浏览器的私有前缀主要是解决不同浏览器的兼容性问题
webkit 谷歌浏览器 安卓
moz 火狐浏览器
o opera浏览器
ms ie浏览器

首先来个简单的也最常见的隔行变色，
代码实例：

    background: -webkit-linear-gradient(#1E66B8,#1E66B8 50%,#CF19C9 50%,#CF19C9) repeat-y; 
    background: -o-linear-gradient(#1E66B8,#1E66B8 50%,#CF19C9 50%,#CF19C9) repeat-y;
    background: -moz-linear-gradient(#1E66B8,#1E66B8 50%,#CF19C9 50%,#CF19C9) repeat-y;
    background: linear-gradient(#1E66B8,#1E66B8 50%,#CF19C9 50%,#CF19C9) repeat-y;
    background-size:100% 50px;

线性渐变 - 从上到下（默认情况下）
下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */

注意： Internet Explorer 9 及之前的版本不支持渐变。

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：

background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue); 
background: -moz-linear-gradient(bottom right, red, blue); 
background: linear-gradient(to bottom right, red , blue); 

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
语法：background: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
下面的实例演示了如何在线性渐变上使用角度：

background: -webkit-linear-gradient(25deg, red, blue); 
background: -o-linear-gradient(25deg, red, blue);
background: -moz-linear-gradient(25deg, red, blue);
background: linear-gradient(25deg, red, blue);

使用多个颜色结点 下面的实例演示了如何设置多个颜色结点，3个颜色结点不均匀分布

background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); 
background: -o-linear-gradient(red 10%, green 85%, blue 90%); 
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); 
background: linear-gradient(red 10%, green 85%, blue 90%); 

使用透明度（Transparency）
CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); 
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

最后介绍一个页面中常用到的按钮图的实现

  background-color: #8c9cbf;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8c9cbf), color-stop(50%, #546a9e), color-stop(50%, #36518f), color-stop(100%, #3d5691));
  background-image: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -ms-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  border: 1px solid #172d6e;
  border-bottom: 1px solid #0e1d45;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 0 0 #b1b9cb;
  box-shadow: inset 0 1px 0 0 #b1b9cb;
  color: #fff;
  font: bold 16px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 7px 0 8px 0;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 -1px 1px #000f4d;
  width: 150px; }
  button.skip:hover {
    background-color: #7f8dad;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8dad), color-stop(50%, #4a5e8c), color-stop(50%, #2f477d), color-stop(100%, #364c80));
    background-image: -webkit-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -ms-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -o-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    cursor: pointer; }
  button.skip:active {
    -webkit-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
    box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; }