DIV+CSS+JS实现的文字色彩渐变（转载）_html/css_WEB-ITnose

如题，这是一个简单的 css + div + javascript 实现的文字色彩渐变效果。

点击查看：Demo | 右键另存下载, 或拷贝以下代码

下面是 CSS 部分代码：

body{	font:12px/1.5 Microsoft Yahei;}h3{	padding:10px;	margin:0;	background-color:#999;	color:#fff;	font:16px/1.5 Microsoft Yahei;	text-align:center;}.box{	position:relative;	background-color:#fff;	width:auto;	margin:0 auto;	padding:0 30px;	font:700 20px/1.5 "Microsoft Yahei",Microsoft Yahei;	border-top:1px dashed #ccc;	border-bottom:1px dashed #ccc;	height:30px;	margin-top:8px;}.box a{	position:absolute;	font-style:normal;	white-space:nowrap;}.f999{	color:#999;}

下面是 DIV 部分代码：

SoftGist

SoftGist是一个软件工具目录站，每天为您带来最好、最令人兴奋的软件新产品。

下载

CSS多彩渐变字
  
    
    
  
    
文字：
    
  
  
    
R值：
    
    RGB颜色中的R值（0-255）
  
  
    
G值：
    
      RGB颜色中的G值（0-255）
  
  
    
B值：
    
      RGB颜色中的B值（0-255）
  
  
    
渐变方式：
    
灰度渐变变化R值变化G值变化B值    相应的数值会强制在0~255之间变化
  

    OK，上色！
 

以下是 JavaScript 部分代码：

立即学习“前端免费学习笔记（深入）”；

// JavaScript代码开始var rs = document.getElementById("rvalue");var gs = document.getElementById("gvalue");var bs = document.getElementById("bvalue");function init(){	var str;	for(var i=0;i<=255;i++){		var opr = document.createElement("option");		var opg = document.createElement("option");		var opb = document.createElement("option");		opr.innerHTML = i;		opg.innerHTML = i;		opb.innerHTML = i;		switch(i){			case 100:opb.selected="selected";break;			case 200:opg.selected="selected";break;		}		gs.appendChild(opg);		rs.appendChild(opr);		bs.appendChild(opb);	}	setDiv();}function setDiv(){	var font = document.getElementById("ctext").value;	var dObj = document.getElementById("box");	dObj.innerHTML=font;}function createData(){	var font = document.getElementById("ctext").value;	var r = rs.options[rs.selectedIndex].text;	var g = gs.options[gs.selectedIndex].text;	var b = bs.options[bs.selectedIndex].text;	var type = document.getElementById("ctype").value;	if(font==""||font=="undefined"){		font="文字不能为空，使用默认文字";		document.getElementById("ctext").value = font;	}	colorful('box',font,r,g,b,type);}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=""+font+"";	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);	}}init();