如题，这是一个简单的 CSS + DIV + JavaScript 实现的文字色彩渐变效果。
点击查看：Demo | 右键另存下载, 或拷贝以下代码
下面是 CSS 部分代码：
1<!--CSS代码开始--> 2body{ 3 font:12px/1.5 Microsoft Yahei; 4} 5h3{ 6 padding:10px; 7 margin:0; 8 background-color:#999; 9 color:#fff; 10 font:16px/1.5 Microsoft Yahei; 11 text-align:center; 12} 13.box{ 14 position:relative; 15 background-color:#fff; 16 width:auto; 17 margin:0 auto; 18 padding:0 30px; 19 font:700 20px/1.5 "Microsoft Yahei",Microsoft Yahei; 20 border-top:1px dashed #ccc; 21 border-bottom:1px dashed #ccc; 22 height:30px; 23 margin-top:8px; 24} 25.box a{ 26 position:absolute; 27 font-style:normal; 28 white-space:nowrap; 29} 30.f999{ 31 color:#999; 32}
下面是 DIV 部分代码：
1<!--DIV代码开始--> 2<div style="width:400px;margin:200px auto;background-color:#f2f2f2;border: 1px dashed #ccc;"> 3<h3><strong>CSS多彩渐变字</strong></h3> 4<table width="100%" border="0" cellspacing="0" cellpadding="0"> 5 <tr> 6 <td height="10" colspan="2" align="center"></td> 7 </tr> 8 <tr> 9 <td width="19%" height="30" align="right">文字：</td> 10 <td width="81%"><input name="text" type="text" id="ctext" size="30" maxlength="16" style="font:12px Microsoft Yahei" value="请在此输入您需要生成渐变色的文字" onkeyup="setDiv()" /></td> 11 </tr> 12 <tr> 13 <td height="30" align="right">R值：</td> 14 <td><select name="Rvalue" style="font:12px Microsoft Yahei" id="rvalue"></select> 15 <span class="f999">RGB颜色中的R值（0-255）</span></td> 16 </tr> 17 <tr> 18 <td height="30" align="right">G值：</td> 19 <td><select name="Gvalue" style="font:12px Microsoft Yahei" id="gvalue"></select> 20 <span class="f999">RGB颜色中的G值（0-255）</span></td> 21 </tr> 22 <tr> 23 <td height="30" align="right">B值：</td> 24 <td><select name="Bvalue" style="font:12px Microsoft Yahei" id="bvalue"></select> 25 <span class="f999">RGB颜色中的B值（0-255）</span></td> 26 </tr> 27 <tr> 28 <td height="30" align="right">渐变方式：</td> 29 <td><select name="ctype" style="font:12px Microsoft Yahei" id="ctype"><option value="0">灰度渐变</option><option value="1" selected="selected">变化R值</option><option value="2">变化G值</option><option value="3">变化B值</option></select> 30 <span class="f999">相应的数值会强制在0~255之间变化</span></td> 31 </tr> 32</table> 33<div class="box" id="box"></div> 34<br /> 35 <button onclick="javascript:createData()">OK，上色！</button> 36<br /> 37 38</div>
以下是 JavaScript 部分代码：
1// JavaScript代码开始 2var rs = document.getElementById("rvalue"); 3var gs = document.getElementById("gvalue"); 4var bs = document.getElementById("bvalue"); 5function init(){ 6 var str; 7 for(var i=0;i<=255;i++){ 8 var opr = document.createElement("option"); 9 var opg = document.createElement("option"); 10 var opb = document.createElement("option"); 11 opr.innerHTML = i; 12 opg.innerHTML = i; 13 opb.innerHTML = i; 14 switch(i){ 15 case 100:opb.selected="selected";break; 16 case 200:opg.selected="selected";break; 17 } 18 gs.appendChild(opg); 19 rs.appendChild(opr); 20 bs.appendChild(opb); 21 } 22 setDiv(); 23} 24function setDiv(){ 25 var font = document.getElementById("ctext").value; 26 var dObj = document.getElementById("box"); 27 dObj.innerHTML=font; 28} 29function createData(){ 30 var font = document.getElementById("ctext").value; 31 var r = rs.options[rs.selectedIndex].text; 32 var g = gs.options[gs.selectedIndex].text; 33 var b = bs.options[bs.selectedIndex].text; 34 var type = document.getElementById("ctype").value; 35 if(font==""||font=="undefined"){ 36 font="文字不能为空，使用默认文字"; 37 document.getElementById("ctext").value = font; 38 } 39 colorful('box',font,r,g,b,type); 40} 41function colorful(obj,font,r,g,b,type){ 42 var boxObj; 43 if(typeof(obj)=="string"||typeof(obj)=="number"){ 44 boxObj = document.getElementById(obj); 45 }else{ 46 boxObj = obj; 47 } 48 boxObj.innerHTML="<a href='#'>"+font+""; 49 var num = boxObj.getElementsByTagName("a")[0].scrollWidth; 50 boxObj.innerHTML=""; 51 for(var i=0;i<=num;i++){ 52 var j=i+1; 53 var c=Math.round(255/num*i); 54 switch(Number(type)){ 55 56 case 0:r=c;g=c;b=c;break; 57 case 1:r=c;break; 58 case 2:g=c;break; 59 case 3:b=c;break; 60 } 61 var iObj = document.createElement("A"); 62 iObj.innerHTML=font; 63 iObj.style.clip="rect(auto "+j+"px auto "+i+"px)"; 64 iObj.style.color="rgb("+r+","+g+","+b+")"; 65 //iObj.href="#"; // 生成的文字超链接 66 boxObj.appendChild(iObj); 67 } 68} 69init();