以下来自CSS实现兼容性的渐变背景(gradient)效果 部分内容
特别注意：IE9以下不支持渐变，需要使用IE的渐变滤镜来实现渐变：
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,
endcolorstr=blue,gradientType=1);
其中上面的滤镜代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。
上面代码实现的是红色至蓝色的渐变，但是不含透明度变化，这是由于IE目前尚未支持opacity属性以及RGBA颜色，要实现IE下的透明度变化，还是需要使用IE滤镜，IE的透明度滤镜功能比较强大，这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。
filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
其中各个参数的含义如下：
opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征：
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。
兼容性的渐变背景效果
.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
background:red; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
<div class="gradient"></div>
以下来自菜鸟教程
从上到下的线性渐变
#grad {
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); /* 标准的语法 */
}
linear-gradient(red, blue)中第一个参数是top所以可以省略，如果写成bottom线性渐变就从bottom开始
纵向线性渐变
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
从上面两个例子可以看出线性渐变主要控制linear-gradient(red, blue)中第一个参数，如果写成left线性渐变从左边开始的纵向渐变，right同理。
对角线性渐变
#grad {
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); /* 标准的语法 */
}
从上面的例子可以看出对角线性渐变也是控制linear-gradient(red, blue)中第一个参数，如果写成left top线性渐变从左上角开始的对角渐变。
自定义角度的对角线性渐变
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
（但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。）
#grad {
background: -webkit-linear-gradient(30deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(30deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(30deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(30deg, red, blue); /* 标准的语法 */
}
从上面的例子可以看出自定义对角线性渐变也是控制linear-gradient(red, blue)中第一个参数为要取得的水平线和渐变线之间的角度。
多个颜色点的渐变
#grad {
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* 标准的语法 */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
多个颜色点渐变也是控制linear-gradient()中的参数为多个多选的渐变颜色，其中颜色都可以使用rgba()来设置透明度。
重复的线性渐变
#grad {
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
repeating-linear-gradient是重复线性渐变的关键，颜色后面跟的百分比是颜色所占比例。
径向渐变
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
radial-gradient是径向渐变的关键，颜色后面的百分比是颜色所占比例。
径向渐变的形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
#grad {
background: -webkit-radial-gradient(circle,red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle,red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle,red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(circle,red 5%, green 15%, blue 60%); /* 标准的语法 */
}
重复的径向渐变
#grad {
background: -webkit-repeating-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-repeating-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-repeating-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: repeating-radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
repeating-radial-gradient是重复径向渐变的关键，颜色后面跟的百分比是颜色所占比例。
