CSS實現相容性的漸變背景(gradient)效果
阿新 • • 發佈：2019-02-06
一、IE系列
（1）語法：
filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
（2）引數：
opacity表示透明度，finishopacity 是一個可選引數，如果想要設定漸變的透明效果，就可以使用他們來指定結束時的透明度。
style用來指定透明區域的形狀特徵：
0 代表統一形狀
1 代表線形
2 代表放射狀
3 代表矩形。
startx 漸變透明效果開始處的 X座標。
starty 漸變透明效果開始處的 Y座標。
finishx 漸變透明效果結束處的 X座標。
finishy 漸變透明效果結束處的 Y座標。
startcolorstr：起始顏色。
endcolorstr：結束顏色。
gradientType：gradientType=0代表縱向漸變，其中gradientType=1代表橫向漸變。
例1：IE8中的效果：
.gradient{ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#127c79', endColorstr='#73aeab',GradientType=0 );}
<div class="gradient"></div>
二、Firefox系列
（1）Firefox支援兩種型別的CSS漸變：線性的(-moz-linear-gradient)和放射狀的(-moz-radial-gradient)。
（2）線性的(-moz-linear-gradient)
1）語法：
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
2）引數：
a.起始點(Starting Point)：起點的工作方式類似於background position。您可以設定水平和垂直位置為百分比，或以畫素為單位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始於左上角。如果你不指定水平或垂直位置，它將預設為center。
例2：垂直漸變
效果圖：
程式碼：
.linear_gradient_square {
width: 100px;
height: 100px;
border: 1px solid #333;
background: -moz-linear-gradient(top, blue, white);}
例3：水平漸變
效果圖：
程式碼：
background: -moz-linear-gradient(left, blue, white);
例4：從左上角開始的漸變
效果圖：
程式碼：
background: -moz-linear-gradient(left top, blue, white);
b.角度(Angle)：正如您在上面看到的，如果您不指定一個角度，它會根據起始位置自動定義。如果你想更多的控制漸變的方向，您不妨設定角度試試。
當指定的角度，請記住，它是一個由水平線與漸變線產生的的角度，逆時針方向。因此，使用0deg將產生一個左到右橫向梯度，而90度將建立一個從底部到頂部的垂直漸變。
例5：
效果圖：
程式碼：
background: -moz-linear-gradient(<angle>, red, white);
c.起止顏色(Color Stops)：除了起始位置和角度，你應該指定起止顏色。起止顏色是沿著漸變線，將會在指定位置（以百分比或長度設定）含有指定顏色的點。色彩的起止數是無限的。如果您使用一個百分比位置，0％代表起點和100％是終點，但區域外的值可以被用來達到預期的效果。
例6：
效果圖：
程式碼：
background: -moz-linear-gradient(top, blue, white 80%, orange);
例7：
效果圖：
程式碼：
background: -moz-linear-gradient(left, red, orange, yellow, green, blue);
d.透明度(Transparency)：還支援透明漸變。這是相當有用的，例如，當堆疊多個背景時。這裡是兩個背景的結合：一張圖片，一個白色到透明的線性漸變。
例8：
效果圖：
程式碼：
.multibackground_transparent {
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
}
三、chrome&safari系列
（1）在webkit核心瀏覽器下(Safari4+, Chrome)，有兩種型別的漸變，線性的和徑向的。
（2）語法：
-webkit-gradient(type, start_point, end_point, / stop...)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)
（3）引數：
引數 具體說明：
1）start_point和end_point
start_point(x1,x2)，end_point(x2,y2)，這裡的x,y對應左上角為起點的座標，此處的x,y引數表示與CSS中的background-position是一致的，可以使畫素值，或是百分比值或是left,top,right,bottom。
2）stop
color-stop()我的理解就是過渡點，這些過渡點有兩個引數，一個是點的位置，另外一個是過渡點的顏色。這些引數的示意也可以在photoshop之類的軟體漸變編輯器中找到對應的位置。
我們會見到類似下面的程式碼片段，color-stop(0.5, #ff0000)所表示的意思是在漸變過渡程序的中心位置(50%的位置)有個顏色為#ff0000（紅色）的過渡色。
（4）建立線性漸變
1）最簡單的線性漸變
.linear{width:130px; height:130px; border:1px solid green; padding:10px; background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)); -webkit-background-origin:padding; -webkit-background-clip:content;}
<div class="linear"></div>
2）線性漸變的基本語法
參見上面的background屬性值，可以得到webkit核心瀏覽器下線性漸變的基本語法，如下：
-webkit-gradient(type,x1 y1, x2 y2, from(開始顏色值), [color-stop(位置偏移-小數,停靠顏色值),...],to(結束顏色值));
（5）建立徑向漸變
徑向漸變也可以稱為放射狀漸變，常用來形成環狀效果，暈狀效果等。如下示例程式碼：
.radial{
display:block;
width:150px;
height:150px;
border:1px solid blue;
background-image:-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
}
<div class="radial"></div>
效果圖：
（6）指定過渡顏色點
即使用color-stop方法建立色標點。含有兩個引數，第一個引數表示漸變點的在整個漸變範圍內的位置，以小數表示；第二個引數為顏色，可以使用RGBA的形式表示，這樣可以指定顏色的透明度。
使用color-stop指定過渡點或稱為色標點時，漸變的開始(from())以及結束(to())顏色都是可以省略的。您可以參見下面的例項，第一個有from()以及end()的漸變，第二個沒有from()以及stop()。
1）使用from()以及to()方法
background: -webkit-gradient(linear, left top, left bottom, from(#ff0), color-stop(0.5, orange), to(rgb(255, 0, 0)));
效果圖：
2）不指定起始顏色與結束顏色
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.40, #ff0), color-stop(0.5, orange), color-stop(0.60, rgb(255, 0, 0)));
效果圖：
3）多個過渡點在同一位置
background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
效果圖：
（7）建立背景重複漸變
CSS3中有個background-size屬性，可以改變背景圖片的大小，配合背景漸變屬性可以實現重複的背景漸變，如下程式碼：
width:400px; height:150px; background:-webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffff00)); -webkit-background-size:0 20px;
效果圖：
（1）語法：
filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
（2）引數：
opacity表示透明度，finishopacity 是一個可選引數，如果想要設定漸變的透明效果，就可以使用他們來指定結束時的透明度。
style用來指定透明區域的形狀特徵：
0 代表統一形狀
1 代表線形
2 代表放射狀
3 代表矩形。
startx 漸變透明效果開始處的 X座標。
starty 漸變透明效果開始處的 Y座標。
finishx 漸變透明效果結束處的 X座標。
finishy 漸變透明效果結束處的 Y座標。
startcolorstr：起始顏色。
endcolorstr：結束顏色。
gradientType：gradientType=0代表縱向漸變，其中gradientType=1代表橫向漸變。
例1：IE8中的效果：
 |
.gradient{ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#127c79', endColorstr='#73aeab',GradientType=0 );}
<div class="gradient"></div>
二、Firefox系列
（1）Firefox支援兩種型別的CSS漸變：線性的(-moz-linear-gradient)和放射狀的(-moz-radial-gradient)。
（2）線性的(-moz-linear-gradient)
1）語法：
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
2）引數：
a.起始點(Starting Point)：起點的工作方式類似於background position。您可以設定水平和垂直位置為百分比，或以畫素為單位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始於左上角。如果你不指定水平或垂直位置，它將預設為center。
例2：垂直漸變
效果圖：
 |
程式碼：
.linear_gradient_square {
width: 100px;
height: 100px;
border: 1px solid #333;
background: -moz-linear-gradient(top, blue, white);}
例3：水平漸變
效果圖：
 |
程式碼：
background: -moz-linear-gradient(left, blue, white);
例4：從左上角開始的漸變
效果圖：
 |
程式碼：
background: -moz-linear-gradient(left top, blue, white);
b.角度(Angle)：正如您在上面看到的，如果您不指定一個角度，它會根據起始位置自動定義。如果你想更多的控制漸變的方向，您不妨設定角度試試。
當指定的角度，請記住，它是一個由水平線與漸變線產生的的角度，逆時針方向。因此，使用0deg將產生一個左到右橫向梯度，而90度將建立一個從底部到頂部的垂直漸變。
例5：
效果圖：
 |
程式碼：
background: -moz-linear-gradient(<angle>, red, white);
c.起止顏色(Color Stops)：除了起始位置和角度，你應該指定起止顏色。起止顏色是沿著漸變線，將會在指定位置（以百分比或長度設定）含有指定顏色的點。色彩的起止數是無限的。如果您使用一個百分比位置，0％代表起點和100％是終點，但區域外的值可以被用來達到預期的效果。
例6：
效果圖：
 |
程式碼：
background: -moz-linear-gradient(top, blue, white 80%, orange);
例7：
效果圖：
 |
程式碼：
background: -moz-linear-gradient(left, red, orange, yellow, green, blue);
d.透明度(Transparency)：還支援透明漸變。這是相當有用的，例如，當堆疊多個背景時。這裡是兩個背景的結合：一張圖片，一個白色到透明的線性漸變。
例8：
效果圖：
 |
程式碼：
.multibackground_transparent {
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
}
三、chrome&safari系列
（1）在webkit核心瀏覽器下(Safari4+, Chrome)，有兩種型別的漸變，線性的和徑向的。
（2）語法：
-webkit-gradient(type, start_point, end_point, / stop...)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)
（3）引數：
 |
引數 具體說明：
1）start_point和end_point
 |
start_point(x1,x2)，end_point(x2,y2)，這裡的x,y對應左上角為起點的座標，此處的x,y引數表示與CSS中的background-position是一致的，可以使畫素值，或是百分比值或是left,top,right,bottom。
2）stop
color-stop()我的理解就是過渡點，這些過渡點有兩個引數，一個是點的位置，另外一個是過渡點的顏色。這些引數的示意也可以在photoshop之類的軟體漸變編輯器中找到對應的位置。
 |
我們會見到類似下面的程式碼片段，color-stop(0.5, #ff0000)所表示的意思是在漸變過渡程序的中心位置(50%的位置)有個顏色為#ff0000（紅色）的過渡色。
（4）建立線性漸變
1）最簡單的線性漸變
.linear{width:130px; height:130px; border:1px solid green; padding:10px; background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)); -webkit-background-origin:padding; -webkit-background-clip:content;}
<div class="linear"></div>
2）線性漸變的基本語法
參見上面的background屬性值，可以得到webkit核心瀏覽器下線性漸變的基本語法，如下：
-webkit-gradient(type,x1 y1, x2 y2, from(開始顏色值), [color-stop(位置偏移-小數,停靠顏色值),...],to(結束顏色值));
（5）建立徑向漸變
徑向漸變也可以稱為放射狀漸變，常用來形成環狀效果，暈狀效果等。如下示例程式碼：
.radial{
display:block;
width:150px;
height:150px;
border:1px solid blue;
background-image:-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
}
<div class="radial"></div>
效果圖：
 |
（6）指定過渡顏色點
即使用color-stop方法建立色標點。含有兩個引數，第一個引數表示漸變點的在整個漸變範圍內的位置，以小數表示；第二個引數為顏色，可以使用RGBA的形式表示，這樣可以指定顏色的透明度。
使用color-stop指定過渡點或稱為色標點時，漸變的開始(from())以及結束(to())顏色都是可以省略的。您可以參見下面的例項，第一個有from()以及end()的漸變，第二個沒有from()以及stop()。
1）使用from()以及to()方法
background: -webkit-gradient(linear, left top, left bottom, from(#ff0), color-stop(0.5, orange), to(rgb(255, 0, 0)));
效果圖：
 |
2）不指定起始顏色與結束顏色
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.40, #ff0), color-stop(0.5, orange), color-stop(0.60, rgb(255, 0, 0)));
效果圖：
 |
3）多個過渡點在同一位置
background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
效果圖：
 |
（7）建立背景重複漸變
CSS3中有個background-size屬性，可以改變背景圖片的大小，配合背景漸變屬性可以實現重複的背景漸變，如下程式碼：
width:400px; height:150px; background:-webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffff00)); -webkit-background-size:0 20px;
效果圖：
 |