动态渐变
<span style="font-size:12px"><html>
...
<body>
<center>
<div id="fade" style="width:600pxheight: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样式中添加：
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的其它*/
把颜色值转换成rgb方式，设定多少秒改变完成，每次改变多少值，计算需要多少次，比如rba(x,y,z)到rgb(a,b,c)，假设需要100次，那么每次设定rgb((a-x)/100+x,(b-y)/100+y,(c-z)/100+z)
