[ 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实现各种元素的裁切和拼接。 
经典的文字拼接实现,多彩文字效果:
 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>

 

posted @ 2016-10-13 13:43  窗棂  Views(208)  Comments(0Edit  收藏  举报