clip属性

　　我们都知道，clip属性为比较有用处的属性，但却在实际应用中不太多见，所以，平时介绍得都很少。clip属性是检索或者是设置对象的可视区域，而可视区域外的部分是透明的。这个属性定义了绝对的定位对象可视区域的尺寸。

　　（一）应用clip属性要注意的两点

　　（1）clip属性一定要和定位属性，即postion一起用才可以生效。

　　（2）clip裁切的计算坐标都是从左上角，就是说（0,0）点开始计算的，如图示，这与padding以及margin不一样，它们的右边距以及下边距都是从最右边以及最下边开始算的。

　　（二）clip属性基础语法

　　clip属性基础语法为：clip:autorect(number number number number)

　　取值：

　　（1）auto为默认值。对象没有剪切

　　（2）rect(numbernumbernumbernumber):根据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，任一数值都能用auto替换，就是说此边不剪切。

　　（三）clip属性说明

　　检索或者是设置对象的可视区域，在可视区域以外的部分是透明的。

　　这个属性定义了绝对定位对象的可视区域的尺寸，一定要把position属性的值设置为absolute，这个属性才可以用。

　　从IE5起，这个属性在MAC平台上才能用。

　　对应的脚本特性是clip。

　　（1）css当中的clip属性可以制作彩色文字，还可以有效地裁切网页中的其他剩余元素。

　　（2）clip属性能设置元素的形状。该属性用于定义一个剪裁矩形，矩形内的内容才可见，矩形外内容和“overflow：hidden”的效果相同。剪裁区域会比元素的内容区大，也有可能比内容区小。

　　（3）clip属性值：autorect(top,right,bottom,left)

　　注意：auto表示不裁切，rect中的上右下左四个方向填入的应该是数值，指的是裁切的位置。

　　（四）实例

　　如图示，先准备一张尺寸是159px*99像素的图，利用clip属性把图片裁切，只显示图中的大红点。

　　制作一个放置图片的CSS定义如下的div外框：

　　div的定位属性设置为相对定位是为了使图片把它当作定位标准，为了让显示效果更明显就把背景定义为#FFF985。

　　再定义图片的裁切属性，CSS如下：

　　绝对定位是相对于id为imgClip的div来说的，clip当中的数值要按照上右下左的顺序进行排列的。

　　html代码：

　　总结：这个属性定义了绝对定位对象可视区域的尺寸。一定要把position属性的值设置为absolute，这个属性才可以使用。我们课课家教育网站会给大家介绍更多关于考试认证、Web开发等等的内容，有兴趣的话可以关注一下。