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都有比较好的的支持。