Css3 clip属性解析

参考博客:https://blog.csdn.net/nicexibeidage/article/details/78466296

clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。

clip无法在设置“position:relative”和“position:static”上工作。

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

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

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

 

clip: rect(<top>, <right>, <bottom>, <left>);  //上、右、下、左 一般控制 右(图的宽度) 下(图的高就行) 左(左边切多少像素) 上 (上面切多少像素就ok)

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

我们简单的来看一个例子：

1. p#one { clip: rect(5px, 40px, 45px, 5px); }

2. p#two { clip: rect(5px, 55px, 45px, 5px); }

上面的例子是在50X55px的长方形盒子中是行剪切，得到虚线的长方形：

<top>, <right>, <bottom>, <left>可以将值设置为“auto”或者长度值<length>。而且还可以充许负的长度值。其中取值为“auto”时，剪切区域的边缘和元素盒子边缘相同。例如：在<top>和<left>设置为auto时，他们就相当于top和left取值为0；如果<right>和<bottom>设置为auto时，他们就相当于元素的宽度（这个宽度包括元素的border、padding和width），或者简单的理解为100%。

针对上面所言，将clip分为以下几种：

1、不显示剪切区域：当rect()中的bottom值小于top值，或者right值小于left值时，整个剪切区域不会显示。例如：

1. .rect2 img {

2. clip: rect(13px,0,161px,30px);/*right值小于left值*/

3. }

4. .rect3 img {

5. clip:rect(13px, 164px, 0, 30px);/*bottom值小于top值*/

6. }

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

1. .rect4 img {

2. clip: rect(auto, 164px, 161px, 30px);}

3. .rect5 img {

4. clip: rect(13px, 164px, 161px, auto);