之前用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); } } CLIP实现色彩渐变字体 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;} CSS多彩渐变字 文字： R值： 初始化RGB颜色中的R值 G值： 初始化RGB颜色中的G值 B值： 初始化RGB颜色中的B值 渐变方式： 灰度渐变变化R值变化G值变化B值 相应的数值会强制在0~255之间变化 渐变着色 Designed by Silence,转载请注明出处 http://www.silentash.com/?id=109 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]虽然IE有自己的渐变滤镜，但其他浏览器都不支持。CLIP属性的应用可以支持所有浏览器！通过程序，我们可以轻松地给每个文字副本添加CLIP属性将一段文字分割成一个一个像素，分别着色，最后组合到一起，实现多彩渐变！

　　推荐阅读

　　不唐突的JavaScript的七条准则整理收集第1/2页

1.不要做任何假设 （JavaScript是一个不可靠的助手） 可能不唐突的JavaScript 的最重要的一个特性就是——你要停止任何假设： * 不要假设JavaScript是可用的，你最好认为它很有可能是不可用的，而不是直接依赖于它>>>详细阅读

本文标题：js Clip奇思妙想之多彩渐变字效果

地址：http://www.17bianji.com/kaifa2/JS/29270.html

 1/2    1