动态渐变
<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的其它*/
其实渐变的实现归根结底都是css（样式）来控制，所以我目前想到的有2种：
所有代码直接在JS里面写：
var test = document.getelementById(''test)
test .style.backgroundImage='linear-gradient(120deg, #155799, #159957)'
PS:这儿的backgroundImage的‘i’一定要大写，并且一定要这么写，不能写成和长沙市里面的background-image一样，JS不识别的。
2.在css里面写好之后，通过js给element添加class来新增样式：
在样式表定义好样式
css：
.jianbian{
background-image: linear-gradient(120deg, #155799, #159957)
}
然后通过js给元素添加class
js:
var test = document.getelementById(''test)
test.className = 'jianbian'
大概就这样了，不过你还需要考虑一下不同浏览器的兼容性，关于渐变的写法。
-webket-/-moz-之类的
1、渐变色是从一种颜色过渡到另一种颜色，是由很多种颜色组成的混合（一个渐变可以有无限多的阴影）。2、我们可以在很多方面使用渐变色。例如在背景和前景的渐变元素，可以做出微妙或者是极端大胆的颜色组合。3、做的最多的是挂染，面料，服装等。工艺接近真丝的炼白，原理是靠重力作用染渐变色。
