多彩文字(MultiColoredText)
制作原理是
将 2个文字相同而色彩区别文字重合在
起通过分别给元素加clip属性使上面和下面文字被剪切位置区别设置区别色彩从而产生多彩文字效果即MultiColoredText
clip属性:
clip:auto|rect(numbernumbernumbernumber)
参数:
auto:对象无剪切
rect(numbernumbernumbernumber):
依据上-右-下-左
顺序提供自对象左上角为(0,0)坐标计算 4个偏移数值其中任数值都可用auto替换即此边不剪切介绍说明:
检索或设置对象
可视区域区域外部分是透明必须将position
值设为absolute此属性方可使用CSS代码:(具体内容请看运行代码)
.textBottom{
color:#333333;
position:absolute;
left:3em;
top:1em;
font:26pxCenturyGothic,Arial,Helvetica,sans-ser
;clip:rect(18pxautoautoauto);
}
.textTop{
color:#CC0000;
position:absolute;
left:3em;
top:1em;
font:26pxCenturyGothic,Arial,Helvetica,sans-ser
;clip:rect(0auto18px0);
}
.container{
width:28em;
height:5em;
margin:1emauto;
position:relative;
background:#F6F6F6;
}
XHTML代码:(具体内容请看运行代码)
<div
=\"container\"><ahref=\"#\"
=\"textTop\">welcometo52css.com</a><ahref=\"#\"
=\"textBottom\">welcometo52css.com</a></div>
查看运行效果:
=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]
最新评论