Clip

Myth丶恋晨 2021-12-23 03:31 249阅读 0赞

Clip属性是大家经常会误解的一个属性，这篇文章帮助大家充分的了解和学习clip属性，用这个属性制作出更好的效果。

我可以确定Clip属性有很多同学并不知道，因为这个属性使用率非常的底，我初次接触是在Drupal的主题之中，他们有一段用来隐藏文本的代码，就是使用的clip属性。

/* Hide only visually, but have it available for screenreaders*/ .visuallyhidden { border: 0 none !important; clip: rect(1px 1px 1px 1px);/*IE<8*/ clip: rect(1px,1px,1px,1px); height: 1px !important; margin: -1px; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px; }

如果你不知道也不用担心，接下来的内容将会涵盖clip属性的各个方法。详细阅读这篇文章，你将对clip属性有一个很深的了解。

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

大家应该看过使用javascript的插件来剪切元素，但是你也可以使用CSS的clip属性实现，也许会有一些限制，但我们可以一起看看。

#### 语法： ####

想要了解clip属性，我们很有必要先学习clip的语法知识：

.selector {
    	clip: <shape> | auto | inherit }

首先你要注意：**clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。**clip无法在设置“position:relative”和“position:static”上工作。

说实话,我真的不知道为什么是这样的。至少,我在网络上没有发现任何有关于这方面的话题,因此,如果你要是知道为什么，希望您能在下面的评论中分享一些知识。

上面的语法告诉我们，clip属性只接受三个不同的属性值：

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

很多时候，你可能希望有更多的shape函数功能使用，比如说rect()和circle()等，但是到目前为止仅有rect()函数可使用，不过不用担心，这个功能就可以帮我们制作很多很酷的效果。

#### Rect()使用 ####

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

clip: rect(<top>, <right>, <bottom>, <left>);

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

![clip][]

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

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

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

![clip][clip 1]

<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值时，整个剪切区域不会显示。例如：

.rect2 img { clip: rect(13px,0,161px,30px);/*right值小于left值*/ } .rect3 img { clip:rect(13px, 164px, 0, 30px);/*bottom值小于top值*/ }

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

.rect4 img { clip: rect(auto, 164px, 161px, 30px); } .rect5 img { clip: rect(13px, 164px, 161px, auto); }

![clip][clip 2]

rect(auto,164px,161px,30px)效果

![clip][clip 3]

rect(13px,164px,161px,auto)效果

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

.rect6 img { clip: rect(13px, auto, 161px, 30px); } .rect7 img { clip: rect(13px, 164px, auto, 30px); }

![clip][clip 4]

rect(13px,auto,161px,30px)效果

![clip][clip 5]

rect(13px,164px,auto,30px)效果

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

详细点击[demo][]。

rect()不能支持百分比值，这一点需要特别的注意。

#### 浏览器兼容性 ####

你可能会很关注，这个属性的兼容性不知道如何？请放心，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的要写在标准语句的前面，不然其他浏览器下将会无任何效果。

#### 案例 ####

想要做鼠标经过的效果一个动画效果，如下图：

![219980-20190129172352633-1150471784.gif][]

代码如下：

<div class="box-wrap">
        <div class="box l"></div>
        <div class="box r"></div>
        <span>点我点我</span>
    </div>
    
    
    <style>
            .box-wrap{
                 
                position: relative;
                width: 128px;
                height: 128px;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .box{
                 
                background: url("./images/icon2.png") no-repeat top left;
                width: 128px;
                height: 128px;
                position: absolute;
                transition: all 0.3s ease-in-out;
            }
            .box.l{
                 
                clip: rect(128px, 64px, 128px, 0px);  /*top  right  bottom  left*/
            }
            .box.r{
                 
                clip: rect(0px, 128px, 0px, 64px);  /*top  right  bottom  left*/
            }
            .box-wrap:hover .box.l{
                 
                clip: rect(0px, 64px, 128px, 0px);  /*top  right  bottom  left*/
            }
            .box-wrap:hover .box.r{
                 
                clip: rect(0px, 128px, 128px, 64px);  /*top  right  bottom  left*/
            }
        </style>

代码中用的图片：

![219980-20190129172551556-197726367.png][]

文章参考: [https://www.w3cplus.com/css3/clip.html][https_www.w3cplus.com_css3_clip.html]

转载于:https://www.cnblogs.com/siyecao2010/p/10334994.html

[W3C]: http://www.w3.org/TR/CSS21/visufx.html#clipping
[clip]: /images/20211223/c186f75a8bf440f1bab04959dc101b3f.png
[clip 1]: /images/20211223/08a7b16b863740968811966174088f18.png
[clip 2]: /images/20211223/59ee8939a5e44262a646b97910a85fb7.png
[clip 3]: /images/20211223/655af677f55b435abf6c4481d1ce2291.png
[clip 4]: /images/20211223/41ed158f7e1e43fbaa35e36c06fe8a63.png
[clip 5]: /images/20211223/f3cca19c8dc040ffaa4fcc9a3c7fa35e.png
[demo]: http://www.w3cplus.com/sites/default/files/blogs/2013/clip/demo.html
[219980-20190129172352633-1150471784.gif]: /images/20211223/a55250f952db43e2ba1acf18814be097.png
[219980-20190129172551556-197726367.png]: /images/20211223/a54f9e938e7e409e9a12364e6030b5dc.png
[https_www.w3cplus.com_css3_clip.html]: https://www.w3cplus.com/css3/clip.html