[ javascript css clip ] javascript css clip 的奇思妙想之文字拼接效果
语法：
clip : auto | rect ( number number number number )
参数：
auto : 对象无剪切
rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切 。
需要注意的是 a
1.clip属性一定要和position:absolute配合使用。
2.裁切参考点始终是左上角，这点和margin,padding不同。
例：
<div style="position:absolute;clip:rect(10px auto 80px 5px)"></div>
我们可以使用clip实现各种元素的裁切和拼接。
经典的文字拼接实现，多彩文字效果：
clip : auto | rect ( number number number number )
参数：
auto : 对象无剪切
rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切 。
需要注意的是 a
1.clip属性一定要和position:absolute配合使用。
2.裁切参考点始终是左上角，这点和margin,padding不同。
例：
<div style="position:absolute;clip:rect(10px auto 80px 5px)"></div>
我们可以使用clip实现各种元素的裁切和拼接。
经典的文字拼接实现，多彩文字效果：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>clip多彩文字</title>
6 <style type="text/css">
7 body{background: #FFFFFF; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 140%; text-align: center; padding: 0; margin: 0;}
8 p{margin: 0; }
9 #top{ min-height: 90%; overflow: auto; }
10 #footer{ height: 10%; background: #CC0000; color: #FFFFFF;}
11 a{ text-decoration: none;}
12 .textBottom { color: #a90; position: absolute; left: 146px; top: 1em; font: 26px "Century Gothic",Arial, Helvetica, sans-serif; clip: rect(18px auto auto auto);}
13 .textTop { color: #f90; position: absolute; left: 146px; top: 1em; font: 26px "Century Gothic",Arial, Helvetica, sans-serif; clip: rect(0 auto 18px 0);}
14 .container { width: 28em; height: 5em; margin: 1em auto; position: relative; background: #F6F6F6;text-align:center}
15 .textTop:hover { color: #a90;}
16 .textBottom:hover { color: #f90;}
17 </style>
18 </head>
19 <body>
20 <div id="top">
21 <div class="container">
22 <a href="#" class="textTop">Clip奇思妙想</a>
23 </div>
24 <p>文字的上半部分</p>
25 <div class="container">
26 <a href="#" class="textBottom">Clip奇思妙想</a>
27 </div>
28 <p>文字的下半部分</p>
29 <div class="container">
30 <a href="#" class="textTop">Clip奇思妙想</a>
31 <a href="#" class="textBottom">Clip奇思妙想</a>
32 </div>
33 <p>二组文字重合的效果</p>
34 </div>
35 </body>
36 </html>
