Clip

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;
   1px;
}	

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

Clip属性在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>指定的偏移量是从元素盒子左边边缘算起。

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

p#one { clip: rect(5px, 40px, 45px, 5px); }
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值时，整个剪切区域不会显示。例如：

.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);
}	

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

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);
}	

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

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的要写在标准语句的前面，不然其他浏览器下将会无任何效果。

案例

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

代码如下：

<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>

代码中用的图片：

文章参考: https://www.w3cplus.com/css3/clip.html