css3 linear-gradient線性漸變
線性漸變：是沿著一根軸線（水平或垂直）改變顏色，從起點(diǎn)到終點(diǎn)顏色進(jìn)行順序漸變（從一邊拉向另一邊）。
css3的linear-gradient線性漸變詳解:
gradient包括linear-gradient線性漸變和radial-gradient徑向漸變。
本章節(jié)只介紹一下線性漸變，關(guān)于徑向漸變可以參閱css3的radial-gradient徑向漸變一章節(jié)。
在當(dāng)前流行的瀏覽器內(nèi)核主要有如下幾種:
（1）.Mozilla（Firefox，F(xiàn)lock等）。
（2）.WebKit（Safari、Chrome等）。
（3）Opera（Opera瀏覽器）。
（4）Trident（IE瀏覽器）,IE9以上瀏覽器支持此屬性。
當(dāng)前最新的線性漸變的語法基本一致（谷歌瀏覽器還有一種比較老式的語法結(jié)構(gòu)，下面會介紹）。
語法結(jié)構(gòu):
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
參數(shù)解析:
（1）. [<point> || <angle>,]:可選，如果用來規(guī)定線性漸變的方向。point值可以是left、top、right或者bottom，也可以是它們的適當(dāng)組合。left標(biāo)識從左到右，top表示從上到下，left top，那就是從左上角到右下角，以此類推。angle規(guī)定一個角度，下面會有介紹。
（2）.<stop>:必需，第二個和第三個參數(shù)分別是起點(diǎn)顏色和終點(diǎn)顏色，當(dāng)然可以在它們之間插入更多的參數(shù)，表示多種顏色漸變。
圖示如下:
?
老版本的谷歌瀏覽器還有一種語法結(jié)構(gòu)如下:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
一切事物都要與時俱進(jìn)，本文章已拋棄這種語法結(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>
上面的代碼對于線性漸變的基本用法做了一下演示，非常的簡單，下面我們繼續(xù)深入介紹。
前面的演示，都沒有指定顏色的位置，所以漸變是平均分布的，其實(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ī)定了漸變的范圍，從80%開始進(jìn)行漸變動作，由于第二個顏色沒有規(guī)定，那么漸變結(jié)束位置就是100%。也就是說80%之前的位置是實(shí)色沒有漸變效果，80%-100%之間的區(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 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角度的使用:
在文章的開頭介紹的語法結(jié)構(gòu)中，第一個參數(shù)還可以是一個角度，如下:
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
它是一個由水平線與漸變線產(chǎn)生的的角度，逆時針方向，如果不指定一個角度，它會根據(jù)起始位置自動定義一個角度。
代碼實(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è)置了一個漸變角度，可能由于是靜態(tài)不利于觀察理解，下面再來給出一個連續(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)擊按鈕可以查看動態(tài)設(shè)置角度的效果，可以有助于理解。
透明度的應(yīng)用:
線性漸變也可以應(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>
? ?
