以下來(lái)自CSS實(shí)現(xiàn)兼容性的漸變背景(gradient)效果 部分內(nèi)容

特別注意：IE9以下不支持漸變，需要使用IE的漸變?yōu)V鏡來(lái)實(shí)現(xiàn)漸變：

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,
endcolorstr=blue,gradientType=1);

其中上面的濾鏡代碼主要有三個(gè)參數(shù)，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表橫向漸變，gradientType=0代表縱向淅變。startcolorstr=”色彩” 代表漸變漸變起始的色彩，endcolorstr=”色彩” 代表漸變結(jié)尾的色彩。

上面代碼實(shí)現(xiàn)的是紅色至藍(lán)色的漸變，但是不含透明度變化，這是由于IE目前尚未支持opacity屬性以及RGBA顏色，要實(shí)現(xiàn)IE下的透明度變化，還是需要使用IE濾鏡，IE的透明度濾鏡功能比較強(qiáng)大，這種強(qiáng)大反而與Firefox或是Safari瀏覽器下的css-gradient背景漸變的用法類似。

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

其中各個(gè)參數(shù)的含義如下：
opacity表示透明度，默認(rèn)的范圍是從0 到 100，他們其實(shí)是百分比的形式。也就是說(shuō)，0代表完全透明，100代表完全不透明。
finishopacity 是一個(gè)可選參數(shù)，如果想要設(shè)置漸變的透明效果，就可以使用他們來(lái)指定結(jié)束時(shí)的透明度。范圍也是0 到 100。
style用來(lái)指定透明區(qū)域的形狀特征：
0 代表統(tǒng)一形狀
1 代表線形
2 代表放射狀
3 代表矩形。
startx 漸變透明效果開(kāi)始處的 X坐標(biāo)。
starty 漸變透明效果開(kāi)始處的 Y坐標(biāo)。
finishx 漸變透明效果結(jié)束處的 X坐標(biāo)。
finishy 漸變透明效果結(jié)束處的 Y坐標(biāo)。

兼容性的漸變背景效果

.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>

ie6下截圖(圖片來(lái)自原文)

以下來(lái)自菜鳥(niǎo)教程

從上到下的線性漸變

橫向線性漸變

#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); /* 標(biāo)準(zhǔn)的語(yǔ)法 */
}

linear-gradient(red, blue)中第一個(gè)參數(shù)是top所以可以省略，如果寫(xiě)成bottom線性漸變就從bottom開(kāi)始

縱向線性漸變

縱向線性漸變

#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); /* 標(biāo)準(zhǔn)的語(yǔ)法 */
}

從上面兩個(gè)例子可以看出線性漸變主要控制linear-gradient(red, blue)中第一個(gè)參數(shù)，如果寫(xiě)成left線性漸變從左邊開(kāi)始的縱向漸變，right同理。

對(duì)角線性漸變

對(duì)角線性漸變

#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); /* 標(biāo)準(zhǔn)的語(yǔ)法 */
}

從上面的例子可以看出對(duì)角線性漸變也是控制linear-gradient(red, blue)中第一個(gè)參數(shù)，如果寫(xiě)成left top線性漸變從左上角開(kāi)始的對(duì)角漸變。

自定義角度的對(duì)角線性漸變

角度是指水平線和漸變線之間的角度，逆時(shí)針?lè)较蛴?jì)算。換句話說(shuō)，0deg 將創(chuàng)建一個(gè)從下到上的漸變，90deg 將創(chuàng)建一個(gè)從左到右的漸變。
（但是，請(qǐng)注意很多瀏覽器(Chrome,Safari,fiefox等)的使用了舊的標(biāo)準(zhǔn)，即 0deg 將創(chuàng)建一個(gè)從左到右的漸變，90deg 將創(chuàng)建一個(gè)從下到上的漸變。換算公式 90 - x = y 其中 x 為標(biāo)準(zhǔn)角度，y為非標(biāo)準(zhǔn)角度。）

逆時(shí)針?lè)较?/div>

30deg的對(duì)角徑向漸變

#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); /* 標(biāo)準(zhǔn)的語(yǔ)法 */
}

從上面的例子可以看出自定義對(duì)角線性漸變也是控制linear-gradient(red, blue)中第一個(gè)參數(shù)為要取得的水平線和漸變線之間的角度。

多個(gè)顏色點(diǎn)的漸變

彩虹色漸變

#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);
  /* 標(biāo)準(zhǔn)的語(yǔ)法 */
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

多個(gè)顏色點(diǎn)漸變也是控制linear-gradient()中的參數(shù)為多個(gè)多選的漸變顏色，其中顏色都可以使用rgba()來(lái)設(shè)置透明度。

重復(fù)的線性漸變

重復(fù)的線性漸變

#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%);
  /* 標(biāo)準(zhǔn)的語(yǔ)法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

repeating-linear-gradient是重復(fù)線性漸變的關(guān)鍵，顏色后面跟的百分比是顏色所占比例。

徑向漸變

徑向漸變

#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%); /* 標(biāo)準(zhǔn)的語(yǔ)法 */
}

radial-gradient是徑向漸變的關(guān)鍵，顏色后面的百分比是顏色所占比例。

徑向漸變的形狀

shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認(rèn)值是 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%); /* 標(biāo)準(zhǔn)的語(yǔ)法 */
}

重復(fù)的徑向漸變

重復(fù)的徑向漸變

#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%); /* 標(biāo)準(zhǔn)的語(yǔ)法 */
}

repeating-radial-gradient是重復(fù)徑向漸變的關(guān)鍵，顏色后面跟的百分比是顏色所占比例。

在線編輯