本文介绍了一个封装好的JavaScript类clip，用于自动生成页面中的渐变文字效果。通过为HTML元素添加name和rel属性指定标识与颜色，并在页面底部初始化配置，即可实现跨浏览器兼容的渐变显示。该方法支持SPAN和A标签，且对禁用JS的浏览器具有容错性。
渐变文字实现原理与配置
只需在HTML页面中，将需要应用渐变色的文字包裹在容器标签（如span或a）内，并为该标签添加name属性以标识渐变元素，同时通过rel属性指定渐变的颜色值。
具体配置如下：
rel="#十六进制颜色-#十六进制颜色"注意，颜色值的格式必须严格符合上述规范，字符数量不能多也不能少。
<!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>CSS+JS多彩渐变字</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;} p{font:16px/1.5 "黑体",arial;padding:5px 10px;margin:0;} .code{padding:8px;} .box{background-color:#fff;border:1px dashed #f60;margin:8px 0;padding:5px;list-style-position:inside} .box li{padding:0;} .f999{color:#999;} a:link{text-decoration:none;} a:hover{text-decoration:underline;} a:visited{text-decoration:underline;} 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> <div style="width:400px;margin:0 auto;background-color:#FFFFCC"> <h3><strong>CSS+js多彩渐变字使用说明</strong></h3> <div class="code"> 首先在HTML页面中引入clip.js，然后给需要渐变效果的HTML元素（比如SPAN）添加name属性和rel属性，格式如下： <div class="box"> <span name="clip:g" rel="#00ffff-#000000">蓝黑渐变文字</span> </div> <ol class="box"> <li>name属性作为渐变标示，name值不正确，将不会产生效果；</li> <li>rel值提供头和尾的颜色，以16进制颜色代码为准，格式为"起始颜色-末端颜色"，其他格式不予支持。格式不正确将不产生效果。</li> <li>最后需要在页面上加上clip.gradient().init({t:["SPAN","A"]});这段代码生成渐变色。</li> </ol> <p> 演示：<span name="clip:g" rel="#00ffff-#000000">蓝黑渐变文字</span> 这是一段文字，我们可以随意挑选几个字做<span name="clip:g" rel="#ff008f-#00ff00">渐变效果</span>，字体的样式<span name="clip:g" rel="#cc0000-#00ffff">随页面的全局样式变化</span>，和本JS无关，这里用黑体可以看的更仔细。 </p> <div class="box">由红转灰的渐变链接：我是连接，用A标签</div> </div> Designed by Silence,转载请注明出处 http://www.silentash.com/?id=110 </address> </div> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
效果呈现非常醒目。
实现该效果的HTML结构示例如下：
字体样式设置
代码示例：
<span name="clip:g" rel="#cc0000-#00ffff">随页面的全局样式变化</span>操作十分简便，仅需使用span元素包裹文字，并赋予其相应的标识和颜色值即可。
JavaScript初始化与兼容性说明
最后，在HTML文档末尾插入JavaScript代码，以激活带有标识的元素的渐变着色功能。
<script type="text/javascript">
clip.gradient().init({t:["SPAN","A"]});
</script>
参数{t:["SPAN","A"]}指定了需要应用效果的元素类型，当前仅支持SPAN和A标签。若需对DIV内部的文字应用渐变，需将配置修改为{t:["SPAN","A","DIV"]}。此配置项置于外部以便用户根据实际需求灵活调整，而非直接封装在JS文件中。
即使部分用户浏览器禁用了JavaScript，页面也不会出现布局错乱或其他异常问题。
PS:
该渐变方法的一大优势在于其广泛的浏览器兼容性（禁用JS的浏览器除外）。