实例：利用样式CSS的Clip属性制作多彩文字
2008-02-23 08:42:17来源：互联网 阅读 ()
多彩文字(Multi Colored Text)的制作的原理是，将二个文字相同而色彩不同的文字重合在一起，通过分别给元素加 clip 属性，使上面和下面的文字被剪切位置不同，设置不同的色彩，从而产生多彩文字的效果，即Multi Colored Text。
clip 属性：
clip : auto | rect ( number number number number )
参数：
auto：对象无剪切
rect ( number number number number ) :
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切
说明：
检索或设置对象的可视区域。区域外的部分是透明的。
必须将position的值设为absolute，此属性方可使用。
CSS代码：
.textBottom {
color: #333333;
position: absolute;
left: 3em;
top: 1em;
font: 26px Century Gothic,Arial, Helvetica, sans-serif;
clip: rect(18px auto auto auto);
}
.textTop {
color: #CC0000;
position: absolute;
left: 3em;
top: 1em;
font: 26px Century Gothic,Arial, Helvetica, sans-serif;
clip: rect(0 auto 18px 0);
}
.container {
width: 28em;
height: 5em;
margin: 1em auto;
position: relative;
background: #F6F6F6;
}
XHTML代码
<div class="container">
<a href="#" class="textTop">welcome to webjx.com</a>
<a href="#" class="textBottom">welcome to webjx.com</a>
</div>
查看运行效果：
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
关键词：
【推荐给好友】【关闭】最新五条评论
查看全部评论
评论总数 0 条您的评论
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
