css中clip属性

css中clip属性

原文地址: http://www.w3cplus.com/css3/clip.html

clip属性只能对设置了"position:absolute"或者“position:fixed”的元素起作用，它无法设置在“position:relative”或者“position:static”上

clip的基础语法：

    .selector{

        clip:<shape> | auto | inherit

    }

<shape> : 表示按照什么样的方式进行剪切，目前只有rect()一种方式可供使用

auto: 是默认值，默认不进行切割

inherit：继承父元素的clip方式

rect()方法：

rect方法有四个参数，遵循着 上、右、下、左的规则，他们之间使用“，”分隔开的，

在css中，rect()的 “上” 和“下”数值的设置都是相对于当前元素的顶部边缘开始算起的，“左”和“右”的数值设置都是相对于当前元素的左边边缘算起的，

这4个值不能设置成百分比，只能使用相应的数值且加单位（单位可以有多种）

例如：#one{clip:5px,40px,45px,5px},按照这种设置的话，效果应该如下：

    

请注意图片上 top/bottom/left/right的相位置是相对于那个边的。

注意：

1、不显示剪切区域：当rect()的bottom值小于top值或者right值小于left值时，不显示被剪切的内容

2、top和left取值为auto时，相当于0

3、bottom和right取值为auto时，相当于100%的宽度

浏览器兼容性

你可能会很关注，这个属性的兼容性不知道如何？请放心，clip属性得到较好的支持，在chrome1.0+、firefox1.0+、opera7.0+、safari1.0+和ie8.0+都支持标准语法，但在ie4.0至ie7.0我们还是需要做一定的处理，需要把每个属性值之间的逗号去掉。

.my-element {
  position: absolute;
  clip: rect(10px  350px  170px  0); /* IE4 to IE7 */
  clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
}

需要特别的注意，ie4-ie7的要写在标准语句的前面，不然其他浏览器下将会无任何效果。