原创力文档- 1、本文档共4页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
DIVCSSJS实现的文字色彩渐变
DIV+CSS+JS实现的文字色彩渐变（转载）
如题，这是一个简单的 CSS + DIV + JavaScript 实现的文字色彩渐变效果。
点击查看：Demo | 右键另存下载, 或拷贝以下代码
下面是 CSS 部分代码：
!--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 部分代码：
!--DIV代码开始--
div style=width:400px;margin:200px auto;background-color:#f2f2f2;border: 1px dashed #ccc;
h3strongCSS多彩渐变字/strong/h3
table width=100% border=0 cellspacing=0 cellpadding=0
tr
td height=10 colspan=2 align=center/td
/tr
tr
td width=19% height=30 align=right文字：/td
td width=81%input name=text type=text id=ctext size=30 maxlength=16 style=font:12px Microsoft Yahei value=请在此输入您需要生成渐变色的文字 onkeyup=setDiv() //td
/tr
tr
td height=30 align=rightR值：/td
tdselect name=Rvalue style=font:12px Microsoft Yahei id=rvalue/select
span class=f999RGB颜色中的R值（0-255）/span/td
/tr
tr
td height=30 align=rightG值：/td
tdselect name=Gvalue style=font:12px Microsoft Yahei id=gvalue/select
span class=f999RGB颜色中的G值（0-255）/span/td
/tr
tr
td height=30 align=rightB值：/td
tdselect name=Bvalue style=font:12px Microsoft Yahei id=bvalue/select
span class=f999RGB颜色中的B值（0-255）/span/td
/tr
tr
td height=30 align=right渐变方式：/td
tdselect name=ctype style=font:12px Microsoft Yahei id=ctypeoption value=0灰度渐变/optionoption value=1 selected=selected变化R值/optionoption value=2变化G值/optionoption value=3变化B值/option/select
span class=f999相应的数值会强制在0~255之间变化/span/td
/tr
/table
div class=box id=box/div
br /
????button onclick=javascript:createData()OK，上色！/button
br /
?
/div
以下是 JavaScript 部分代码：
// JavaScript
文档评论（0）