css中clip属性的使用

css的clip属性经常用不到，使用率很低。

简述clip属性

w3c介绍clip属性：

通过元素进行剪切来控制元素的可显示区域，默认情况下，元素是不进行任何剪切的，但是也有可能剪切区域也显示的设置了clip属性。

clip属性接受三个不同属性值：

• shape: shape是一个函数功能，当使用时仅适用rect()属性。
• auto：这是一个默认值，clip设置auto值和没有进行剪切是一样的效果。
• inherit：继承父元素的clip属性值。

Rect()使用

1：rect()要设置4个值：top,right,bottom,left它们之间要用逗号隔开。

rect()和bottom指定偏移量是从元素盒子顶部边缘算起；left和right指定偏移量是从盒子左边边缘算起。

如果bottom指小于top值，或者right值小于left值，整个 剪切区域不会显示

.rect img{
clip:rect(13px,0,16px 9px);/*left值小于right值*/
}

2：top和left取值为auto，当top或者left取值为auto时，相当于取值为0.

3：bottom和right取值为auto时，相当于元素的100%宽度。

兼容问题
ie8以下不兼容，我们需要做一些处理，将每个属性值之间的逗号都去掉。
其他浏览器对clip都有比较好的的支持。