background: -webkit-linear-gradient(top,#ffffff,#f5f5f5); background: -moz-linear-gradient(top,#ffffff,#f5f5f5); background: -webkit-gradient(linear, ... ...
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); 相關說明: 上面的濾鏡代碼主要有三個參數,依次是: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));