先截两个图看看：
效果很不错吧？会不会误以为这些字体是图片？这可不是图片，而是用js实现的
在线演示 http://demo.jb51.net/js/gradient-test/demo.htm
下面来简单分享下实现过程及原理(网站中使用了jquery这个lib，我们这里就不再自己单独实现了，我们这里分享的也是jquery的实现方法)：
html代码：
复制代码 代码如下:
© 2009 dragon interactive. all rights reserved.
为了便于代码重用，我们通过class来标识出哪些文字需要增加这个特效，这里用的是rainbows。
css代码：
复制代码 代码如下:
.rainbows{position:relative;display:block;} .rainbow { background: transparent; display: block; position: relative; height: 1px; overflow: hidden; z-index: 5; } .rainbow span { position: absolute; display: block; top: 0; left: 0px; } .rainbows .highlight { color: #fff; display:block; position: absolute; top: -2px; left: 0px; z-index: 4; } .rainbows .shadow { color: #000; display:block; position: absolute; opacity: 0.5; filter:alpha(opacity=50); top: 2px; left: 2px; z-index: 3; }.rainbows{position:relative;display:block;}
.rainbow {
background: transparent;
display: block;
position: relative;
height: 1px;
overflow: hidden;
z-index: 5;
}
.rainbow span {
position: absolute;
display: block;
top: 0;
left: 0px;
}
.rainbows .highlight {
color: #fff;
display:block;
position: absolute;
top: -2px;
left: 0px;
z-index: 4;
}
.rainbows .shadow {
color: #000;
display:block;
position: absolute;
opacity: 0.5;
filter:alpha(opacity=50);
top: 2px;
left: 2px;
z-index: 3;
}
这里主要说明下highlight和shadow这两个class的意义，其实从字面也基本可以理解，这两个class是为了增加字体的立体性而设定，一个是白色的高亮，一个是黑色阴影。
js部分：
复制代码 代码如下:
function initgradients(s) { $(function() { $(s).each(function() { var el = this; var from = $(el).attr('gradfromcolor')||'#ffffff', to = $(el).attr('gradtocolor')||'#000000'; var fr = parseint(from.substring(1, 3), 16), fg = parseint(from.substring(3, 5), 16), fb = parseint(from.substring(5, 7), 16), tr = parseint(to.substring(1, 3), 16), tg = parseint(to.substring(3, 5), 16), tb = parseint(to.substring(5, 7), 16); var h = $(this).height() * 1.5; var html,cachehtml=[]; this.inithtml = html = this.inithtml||this.innerhtml; this.innerhtml = ''; for (var i = 0; i ' + html + '') } cachehtml.push('' + html + '','' + html + ''); $(cachehtml.join('')).appendto(this) }) }) } //这个部分就是调用了，传入要添加效果的元素，这里可以是jquery的任意选择符。 initgradients('.rainbows'); function initgradients(s) {
$(function() {
$(s).each(function() {
var el = this;
var from = $(el).attr('gradfromcolor')||'#ffffff', to = $(el).attr('gradtocolor')||'#000000';
var fr = parseint(from.substring(1, 3), 16),
fg = parseint(from.substring(3, 5), 16),
fb = parseint(from.substring(5, 7), 16),
tr = parseint(to.substring(1, 3), 16),
tg = parseint(to.substring(3, 5), 16),
tb = parseint(to.substring(5, 7), 16);
var h = $(this).height() * 1.5;
var html,cachehtml=[];
this.inithtml = html = this.inithtml||this.innerhtml;
this.innerhtml = '';
for (var i = 0; i var c = '#' + (math.floor(fr * (h - i) / h + tr * (i / h))).tostring(16) + (math.floor(fg * (h - i) / h + tg * (i / h))).tostring(16) + (math.floor(fb * (h - i) / h + tb * (i / h))).tostring(16);
cachehtml.push('' + html + '')
}
cachehtml.push('' + html + '','' + html + '');
$(cachehtml.join('')).appendto(this)
})
})
}
//这个部分就是调用了，传入要添加效果的元素，这里可以是jquery的任意选择符。
initgradients('.rainbows');
代码看起来并不算多，但是如果想明白原理的话还是要认真的理解下这个代码的。
结合js/css我们可以看出其大概的思路如下：
程序首先算出字体所在容器的高度n，然后清空容器内容，并添加n个span，每个span内容都为原容器的文字，每个span的颜色根据渐变色进行计算，而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。css中可以看到，每个span的高度都为1。这样，我们就通过n各不同颜色的1px的span把字体“拼”出来了，然后加上“高光/阴影”就搞定。
基于jquery的立体文字渐变效果