本文详细解析了纯JavaScript与CSS实现渐变色的两种形式：动态渐变与静态渐变。通过JavaScript定时器循环修改背景透明度实现动态渐变效果，并利用CSS3的-webkit-gradient及-webkit-linear-gradient属性实现静态线性渐变，同时兼容IE6及其他浏览器。
引言：渐变色的两种形式
提到“渐变色”，你首先会联想到什么？
在深入搜索该名词时，我发现它实际上包含两种不同的理解或表现形式：动态渐变与静态渐变。
所谓动态渐变，可以举一个简单的例子：当某人出现时，其脸颊逐渐泛红……这种变化是持续不断的；而静态渐变则更为直观：例如天空中的彩虹，由红、橙、黄、绿、青、蓝、紫组成。在最终呈现的效果中，颜色从一部分过渡到另一部分，变化幅度可能较小，但关键在于它已经形成了一种固定的视觉状态，不再发生实时改变。
动态渐变的JavaScript实现
首先，我们使用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>由此可见，实现过程主要涉及字符串拼接以及函数的重复调用。
静态渐变的CSS实现与兼容处理
* 静态渐变
首先附上效果图，让大家直观了解其大致含义。
在不考虑浏览器兼容性的前提下（若深入研究兼容性，界面开发确实需要全面考虑，此处暂且忽略），我使用的是Webkit内核，因此先以此为例进行介绍。
在CSS样式中添加以下代码：
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));
简单解释如下：
linear：这里涉及线性渐变和径向渐变两个概念，区别在于前者是沿一条直线进行变化，后者则是像圆形一样向四周扩散；
后面的四个值：分别代表相应方向的像素值，可以按照从左顺时针的顺序记忆，但它代表的是渐变结束的颜色（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了么我....