那么有人就问了，什么CSS做的效果既奇妙又实用的呢？Clip，对，就是css里的clip属性，被多数人忽略的属性： 语法： clip : auto | rect ( number number number number ) 参数： auto : 　对象无剪切 rect ( number number number number ) : 　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切 。 需要注意的是 1.clip属性一定要和position:absolute配合使用。 2.裁切参考点始终是左上角，这点和margin,padding不同。 例： <div style="position:absolute;clip:rect(10px auto 80px 5px)"></div> 我们可以使用clip实现各种元素的裁切和拼接。 经典的文字拼接实现，多彩文字效果： clip多彩文字 body{background: #FFFFFF; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 140%; text-align: center; padding: 0; margin: 0;} p{margin: 0; } #top{ min-height: 90%; overflow: auto; } #footer{ height: 10%; background: #CC0000; color: #FFFFFF;} a{ text-decoration: none;} .textBottom { color: #a90; position: absolute; left: 146px; top: 1em; font: 26px "Century Gothic",Arial, Helvetica, sans-serif; clip: rect(18px auto auto auto);} .textTop { color: #f90; position: absolute; left: 146px; 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;text-align:center} .textTop:hover { color: #a90;} .textBottom:hover { color: #f90;} Clip奇思妙想 文字的上半部分 Clip奇思妙想 文字的下半部分 Clip奇思妙想 Clip奇思妙想 二组文字重合的效果 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]这个是竖着拼接，我们也可以横向拼接，多写一些的话可以实现渐变色，炫啊！

　　推荐阅读

　　js颜色选择器代码[firefox不支持]

最简单的，在body区域加入： 复制代码 代码如下:<OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0"></OBJECT> 调用的JS： 复制代码 代码如下:<script type="tex>>>详细阅读

本文标题：js Clip的奇思妙想之文字拼接效果

地址：http://www.17bianji.com/kaifa2/JS/29240.html

 1/2    1