說起“漸層色”，你會想起什嗎？
當我開始搜尋尋找這個名詞的時候，才發現它實際上是有兩種理解或者說是兩種形式的：動態漸層和靜態漸層。
所謂動態漸層，舉個簡單的例子：他來了，她的臉漸漸紅了...漸漸的，漸漸改變的，是不斷在改變的；而靜態漸層，也就更簡單了：天上一到彩虹，赤橙黃綠青藍紫啊...在當前展示的成品中，顏色從一部分到另一部分的顏色是不一樣的，可能幅度比較小，是逐漸改變的，但有一點是至關重要的，它已經存在了，形成了變化的現狀且無法再改變。
這樣我們先來用javascript實現一下所謂的動態漸層，考慮動態原因就不上圖了，我來簡單介紹下思路：
* 動態漸層
複製代碼 代碼如下:
<span style="font-size:12px;"><html>
...
<body>
<center>
<div id="fade" style="width:600px;height:200px;"></div>
</center>
</body>
</html></span>
為了方便查看，我寫的是內嵌樣式，還是推薦使用外鏈樣式的使用啊，接下來進行簡單編寫動態實現漸層效果：
複製代碼 代碼如下:
<span style="font-size:12px;"><script type="text/javascript">
var node=document.getElementById("fade");
var color="#0000";
var level=1;
window.load=function fading(){
node.style.background=color.+level.toString()+level.toString();
level++;
if(level>16){
clearTimeOut(fading);
}else{
setTimeOut(fading,300);
}
}
<script></span>
這樣看來我不用多說了吧，就一個拼接和一個重複調用的問題。
* 靜態漸層
先來附圖，大家看看效果，大體明白神馬意思。
![]()
在不考慮相容的前提下，額，真改研究下相容了，這弄介面不考慮相容有點缺啊，好吧，先這樣繼續說，我是用的webkit核心，就先用這個來介紹
在css樣式中添加：
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));
簡單解釋下：
linear：這個就碰到了線性漸層和放射狀漸層的兩個概念，無非是在一條線上進行變化的線性和像圓一樣向四周擴散的徑向；
後面的四個值：分別代表相應方向的px值，可以從左順時針轉的順序記憶，但是它代表的是to，截止到的顏色
from：這就是開始的顏色了
to：和from是同時出現的，最後漸層結束的顏色
而color-stop：則是指在變化到線的哪個位置的時候會出現什麼顏色，當然是從周圍過渡過去的，相當於from，to過渡點，from過渡點，to；
好了，這樣就明白多了吧，附送下簡單的其他的基本代碼
複製代碼 代碼如下:
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/
background:-moz-linear-gradient(left,#ffffff,#ff0000);/*非IE6的其它*/
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));/*非IE6的其它*/
今天看了一集《開講了》，原來還有這麼好看的節目，太lower了麼我....
