js Clip奇思妙想之多彩渐变字效果

(编辑：jimmy 日期: 2026/8/11 浏览：2)

之前用Clip属性实现了文字上下两半不同色彩的拼接。
多彩渐变字，兼容所有主流浏览器。
页面JS当中真正有用的只有colorful()函数：
复制代码代码如下:
function colorful(obj,font,r,g,b,type){
var boxObj;
if(typeof(obj)=="string"||typeof(obj)=="number"){
boxObj = document.getElementById(obj);
}else{
boxObj = obj;
}
boxObj.innerHTML="<a href='#'>"+font+"</a>";
var num = boxObj.getElementsByTagName("a")[0].scrollWidth;
boxObj.innerHTML="";
for(var i=0;i<=num;i++){
var j=i+1;
var c=Math.round(255/num*i);
switch(Number(type)){
case 0:r=c;g=c;b=c;break;
case 1:r=c;break;
case 2:g=c;break;
case 3:b=c;break;
}
var iObj = document.createElement("A");
iObj.innerHTML=font;
iObj.style.clip="rect(auto "+j+"px auto "+i+"px)";
iObj.style.color="rgb("+r+","+g+","+b+")";
iObj.href="#";
boxObj.appendChild(iObj);
}
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CLIP实现色彩渐变字体</title> <style type="text/css"> body{font:12px/1.5 arial} h3{padding:10px;margin:0;background-color:#c00;border:1px dashed #fff;color:#fff;font:16px/1.5 arial;} .box{position:relative;background-color:#fff;width:auto;margin:0 auto;padding:0 30px;font:700 20px/1.5 "黑体",arial;border:1px dashed #f60;height:30px;margin-top:8px;} .box a{position:absolute;font-style:normal;white-space:nowrap;} .f999{color:#999;} a:link{text-decoration:none;} a:hover{text-decoration:underline;} a:visited{text-decoration:none;} address{background-color:#f1f1f1;border:1px dashed #ddd;padding:10px;font-style:normal;color:#999;} address a,address a:visited{color:#c00;} </style> </head> <body>  <h3><strong>CSS多彩渐变字</strong></h3>      文字： <input name="text" type="text" id="ctext" size="30" maxlength="16" value="请在此输入您需要生成渐变色的文字" onkeyup="setDiv()" />   R值： <select name="rvalue" id="rvalue"></select> 初始化RGB颜色中的R值   G值： <select name="gvalue" id="gvalue"></select> 初始化RGB颜色中的G值   B值： <select name="bvalue" id="bvalue"></select> 初始化RGB颜色中的B值   渐变方式： <select name="ctype" id="ctype"><option value="0">灰度渐变</option><option value="1" selected="selected">变化R值</option><option value="2">变化G值</option><option value="3">变化B值</option></select> 相应的数值会强制在0~255之间变化     &nbsp;&nbsp;&nbsp;&nbsp;<button onclick="javascript:createData()">渐变着色</button>  &nbsp;  Designed by Silence,转载请注明出处  http://www.silentash.com/?id=109 </address>   </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
虽然IE有自己的渐变滤镜，但其他浏览器都不支持。CLIP属性的应用可以支持所有浏览器！通过程序，我们可以轻松地给每个文字副本添加CLIP属性将一段文字分割成一个一个像素，分别着色，最后组合到一起，实现多彩渐变！

上一篇：封装了一个自动生成渐变字的JS类(clip)

下一篇：js Clip的奇思妙想之文字拼接效果