Clip简述

Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”。

.selector {
clip: | auto | inherit
}
clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。无法在设置“position:relative”和“position:static”上工作。

:shape是一个函数功能,当使用仅使用rect()属性;
auto:这是一个默认值,clip设置auto值和没有进行剪切是一样的效果;
inherit:继承父元素的clip属性值。
很多时候,你可能希望有更多的shape函数功能使用,比如说rect()和circle()等,但是到目前为止仅有rect()函数可使用,不过不用担心,这个功能就可以帮我们制作很多很酷的效果。

Rect()使用
接下来我们来看rect()使用方法。rect()需要设置四个值:top, right, bottom和left。他们之间需要用逗号隔开,而且rect()属性值和margin、padding以及bodrder具有一样的标准,遵循TRBL顺时针旋转的规则。

clip: rect(, , , );
在CSS2.1中,rect()和和指定偏移量是从元素盒子顶部边缘算起;和指定的偏移量是从元素盒子左边边缘算起。
, , , 可以将值设置为“auto”或者长度值。而且还可以充许负的长度值。其中取值为“auto”时,剪切区域的边缘和元素盒子边缘相同
不同浏览器对其的支持不一样。
clip: rect(10px 350px 170px 0); /* IE4 to IE7 /
clip: rect(10px, 350px, 170px, 0); /
IE8+ & other browsers */
需要特别的注意,ie4-ie7的要写在标准语句的前面,不然其他浏览器下将会无任何效果
参考于:http://www.w3cplus.com/css3/clip.html

猜你喜欢

转载自blog.csdn.net/qq_43140093/article/details/84244865