界面渐变特效 -- CSS实现 -- ?兼容IE8

特别注意：里面的RGB颜色值必须要全写，不能使用缩写。

左右：
background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#213c7c)); ??　　background: -webkit-linear-gradient(left, #80c1e7, #213c7c); ??　　background: -moz-linear-gradient(left, #80c1e7, #213c7c); ??　　background: -o-linear-gradient(left, #80c1e7, #213c7c); ??　　background: -ms-linear-gradient(left, #80c1e7, #213c7c); ??　　background: linear-gradient(left, #80c1e7, #213c7c); ??　　filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #80c1e7, endColorstr = #213c7c); ??上下： ???background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e8e8e8)); ??????background: -webkit-linear-gradient(top, #ffffff, #e8e8e8); ??????background: -moz-linear-gradient(top, #ffffff, #e8e8e8); ??????background: -o-linear-gradient(top, #ffffff, #e8e8e8); ??????background: -ms-linear-gradient(top, #ffffff, #e8e8e8); ??????background: linear-gradient(top, #ffffff, #e8e8e8); ??????filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0, startColorstr = #ffffff, endColorstr = #e8e8e8); ??

上下：
background: -webkit-linear-gradient(top,#ffffff,#f5f5f5); ???background: -moz-linear-gradient(top,#ffffff,#f5f5f5); ???background: -webkit-gradient(linear, top, bottom,from(#ffffff),to(#f5f5f5)); ???background: linear-gradient(top,#ffffff,#f5f5f5); ???background: -ms-linear-gradient(top,#ffffff,#f5f5f5); ???filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#f5f5f5);左右：background: -webkit-linear-gradient(left,#41caf4,#5399f6); ???background: -moz-linear-gradient(left,#41caf4,#5399f6); ???background: -webkit-gradient(linear,left top,right top,from(#41caf4),to(#5399f6)); ???background: linear-gradient(left,#41caf4,#5399f6); ???background: -ms-linear-gradient(left,#41caf4,#5399f6); ???filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#41caf4, endColorstr=#5399f6);IE透明度：filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*IE6~IE8*/相关说明：上面的滤镜代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。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坐标。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));