27.3　设置层的可视区域

属性clip用来设置对象的可视区域，而区域外的部分是透明的。属性clip其后可接两个参数，默认值为auto，表示对象无剪切，而rect参数表示坐标的位置，有四个数值，其语法如下所示。

clip：auto|rect（number number number number）

这个属性很有意思，特别是在网页中做特效，所表达出的功能不同，下面是对这两个参数的解释。

❑参数auto：默认值，对象无剪切。

❑参数rect：依据上右下左的顺序提供自对象左上角为（0，0）坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。

将两个文字相同而色彩不同的文字重合在一起，分别给其加clip属性，使上面和下面的文字被剪切位置不同，从而产生两种不同的色彩，代码27.3演示了如何将两行文字剪切成一行特效文本。

代码27.3　源代码\第27章\clip用法

——————————————-文件名：clip用法.html——————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞clip用法＜/title＞

04 ＜style type="text/css"＞

05 .textBottom{

06 color：#333333；

07 /设置绝对定位/

08 position：absolute；

09 /左端距离/

10 left：3em；

11 /顶部距离/

12 top：1em；

13 /字体属性/

14 font：26px Century Gothic, Arial, Helvetica, sans-serif；

15 clip：rect（18px auto auto auto）；

16 }

17 .textTop{

18 color：#CC0000；

19 /绝对定位/

20 position：absolute；

21 left：3em；

22 top：1em；

23 font：26px Century Gothic, Arial, Helvetica, sans-serif；

24 clip：rect（0 auto 18px 0）；

25 }

26 .container{

27 width：28em；

28 height：5em；

29 margin：1em auto；

30 /相对定位/

31 position：relative；

32 background：#F6F6F6；

33 }

34 ＜/style＞

35 ＜/head＞

36 ＜body＞

37 ＜div class="container"＞

38 ＜a href="#"class="textTop"＞HTML+CSS完全自学手册＜/a＞

39 ＜a href="#"class="textBottom"＞HTML+CSS完全自学手册＜/a＞

40 ＜/div＞

41 ＜/body＞

42 ＜/html＞

【代码解析】在代码27.3中，用定位position和clip表示出了文本特效，在HTML代码中出现的两行相同的文本，在网页中却显示出一行文本，而且字体颜色变成上半部分与下半部分不一样。其原理是用clip把部分剪切掉了，代码第15行截取了第一行文字的下半部分，代码第24行截取了第一行文字的上半部分，用定位把两行文本放在同一位置上，效果如图27.4所示。

图　27.4　用clip设置文本特高