css3 linear-gradient線性漸變
線性漸層：是沿著一條軸線（水平或垂直）改變顏色，從起點(diǎn)到終點(diǎn)顏色進(jìn)行順序漸層（從一邊拉向另一邊）。
css3的linear-gradient線性漸層詳解:
gradient包含linear-gradient線性漸層和radial-gradient徑向漸層。
本章節(jié)只介紹一下線性漸變，關(guān)於徑向漸變可以參考css3的radial-gradient徑向漸變一章節(jié)。
在目前流行的瀏覽器核心主要有以下幾種:
（1）.Mozilla（Firefox，F(xiàn)lock等）。
（2）.WebKit（Safari、Chrome等）。
（3）Opera（Opera瀏覽器）。
（4）Trident（IE瀏覽器）,IE9以上瀏覽器支援此屬性。
目前最新的線性漸變的語(yǔ)法基本上一致（Google瀏覽器還有一個(gè)比較老式的語(yǔ)法結(jié)構(gòu)，下面會(huì)介紹）。
語(yǔ)法結(jié)構(gòu):
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
參數(shù)解析:
（1）. [<point> || <angle>,]:可選，如果用來(lái)規(guī)定線性漸變的方向。 point值可以是left、top、right或bottom，也可以是它們的適當(dāng)組合。 left標(biāo)識(shí)從左到右，top表示從上到下，left top，那就是從左上角到右下角，以此類推。 angle規(guī)定一個(gè)角度，下面會(huì)有介紹。
（2）.<stop>:必需，第二個(gè)和第三個(gè)參數(shù)分別是起點(diǎn)顏色和終點(diǎn)顏色，當(dāng)然可以在它們之間插入更多的參數(shù)，表示多種顏色漸變。
圖示如下:
?
舊版的Google瀏覽器還有一個(gè)語(yǔ)法結(jié)構(gòu)如下:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
一切事物都要與時(shí)俱進(jìn)，本文章已拋棄這種語(yǔ)法結(jié)構(gòu)，有興趣的朋友可以自己查閱。
程式碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.left{
background:-webkit-linear-gradient(left, #ace,#f96 );
background:-moz-linear-gradient(left, #ace,#f96 );
background:-o-linear-gradient(left,#ace,#f96);
}
.top{
background:-webkit-linear-gradient(top, #ace,#f96 );
background:-moz-linear-gradient(top, #ace,#f96 );
background:-o-linear-gradient(top,#ace,#f96);
}
.lefTop{
background:-webkit-linear-gradient(left top, #ace,#f96 );
background:-moz-linear-gradient(left top, #ace,#f96 );
background:-o-linear-gradient(left top,#ace,#f96);
}
.more{
background:-webkit-linear-gradient(left, #ace, #f96, #0094ff );
background:-moz-linear-gradient(left, #ace, #f96, #0094ff );
background:-o-linear-gradient(left, #ace, #f96, #0094ff);
}
</style>
</head>
<body>
<div class="left"></div>
<div class="top"></div>
<div class="lefTop"></div>
<div class="more"></div>
</body>
</html>
上面的程式碼對(duì)於線性漸層的基本用法做了演示，非常的簡(jiǎn)單，下面我們繼續(xù)深入介紹。
前面的演示，都沒(méi)有指定顏色的位置，所以漸變是平均分佈的，其實(shí)我們可以控制漸變的區(qū)域。
程式碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(left, #ace 80%, #f96);
background:-moz-linear-gradient(left, #ace 80%, #f96);
background:-o-linear-gradient(left,#ace 80%, #f96);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
上面的程式碼就規(guī)定了漸層的範(fàn)圍，從80%開(kāi)始進(jìn)行漸層動(dòng)作，由於第二個(gè)顏色沒(méi)有規(guī)定，那麼漸層結(jié)束位置就是100%。也就是說(shuō)80%之前的位置是實(shí)色沒(méi)有漸層效果，80%-100%之間的區(qū)域是漸層的。再來(lái)看一段程式碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(left, #ace 30%, #f96 80% );
background:-moz-linear-gradient(left, #ace 30%, #f96 80%);
background:-o-linear-gradient(left,#ace 30%, #f96 80%);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
上面的程式碼中就是規(guī)定30%-80%之間的區(qū)域?yàn)闈u層區(qū)域，其他地方為實(shí)色。
關(guān)於angle角度的使用:
在文章的開(kāi)頭介紹的語(yǔ)法結(jié)構(gòu)中，第一個(gè)參數(shù)還可以是一個(gè)角度，如下:
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
它是一個(gè)由水平線與漸變線產(chǎn)生的的角度，逆時(shí)針?lè)较?，如果不指定一個(gè)角度，它會(huì)根據(jù)起始位置自動(dòng)定義一個(gè)角度。
程式碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(30deg,#ace,#f96);
background:-moz-linear-gradient(30deg,#ace,#f96);
background:-o-linear-gradient(30deg,#ace,#f96);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
上面設(shè)定了一個(gè)漸層角度，可能由於是靜態(tài)不利於觀察理解，下面再來(lái)給出一個(gè)連續(xù)的設(shè)定效果。
程式碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(0deg,#ace,#f96);
background:-moz-linear-gradient(0deg,#ace,#f96);
background:-o-linear-gradient(0deg,#ace,#f96);
}
</style>
<script>
window.onload = function () {
var odiv = document.getElementsByTagName("div")[0];
var obt = document.getElementById("bt");
obt.onclick = function () {
var timer = null;
var count = 0;
timer = setInterval(function () {
if (count == 360) {
clearInterval(timer);
}
count = count + 1;
odiv.style.background = "-webkit-linear-gradient(" + count + "deg,#ace,#f96)";
odiv.style.background = "-moz-linear-gradient(" + count + "deg,#ace,#f96)";
odiv.style.background = "-o-linear-gradient(" + count + "deg,#ace,#f96)";
}, 100)
}
}
</script>
</head>
<body>
<div class="antzone"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
#點(diǎn)擊按鈕可以查看動(dòng)態(tài)設(shè)定角度的效果，可以有助於理解。
透明度的應(yīng)用:
線性漸變也可以套用在透明度上，程式碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:1000px;
height:667px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1)),url(http://img01.taopic.com/141002/240423-14100210124112.jpg);
background:-moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1)),url(http://img01.taopic.com/141002/240423-14100210124112.jpg);
background:-o-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1)),url(http://img01.taopic.com/141002/240423-14100210124112.jpg);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
? ?
