clip

时间:2017-01-11 19:33:12 公众号:体育最前线

clip 属性用于剪切一个元素的区域,只保留元素的一部分可见。

这个属性是 CSS 2.1 中的属性,现在的浏览器,包括远古的 IE6、IE7 都是兼容的,但是我们却很少用这个属性。而我还是忍不住想介绍它。

在元素被剪切之后可见的元素的部分称为剪切区域。剪切应用于元素的边框区域,该区域最初完全可见。剪切元素实际上类似于剪切它。

剪辑属性仅适用于绝对定位(absolute)或固定(fixed)的元素。它对相对或静态定位的元素没有任何影响。使用 clip ,您可以指定向内偏移,指定要剪裁的元素边缘的区域。

clip 属性只接受一个形状函数,即 rect() 函数,作为一个值。rect() 函数接收四个参数,它们是从元素的顶部和左边界向内的偏移。

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

顶部和底部值都定义了从顶部边框的偏移量,左侧和右侧值都定义了从左边界开始的偏移量。

我们来看一张图:


clip 原理

剪切区域或元素在剪切后保持可见的部分由 rect() 函数的偏移量定义,如上图所示。

就是如此,这点clip需要记得很清楚。

在 CSS 2.1 中,所有剪切区域都是矩形的,就是使用 rect();而在 CSS3 中新增了一个 clip-path 属性。它允许你使用不同的形状函clip数来剪切元素,因此比 clip 更加灵活。

它的参数:clip: auto(默认) | rect( ) | inherit

  • auto:默认值。表示元素不进行剪切。
  • rect( ):指定矩形裁剪区域。也就是说,它指定在元素被剪切之后将可见的元素的区域。

我们来举个例子:

img {
  clip: rect(275px, 575px, 425px, 365px);
}

结果如图所示:


显示结果

当然,这是网上的例子,现在我们动手自己实现一个 clip 吧。

首先创建一个图片:

<div class="box">
  ![](1.jpg)
</div>
<p>我在这里/p>

上面有个 p 标签,暂时先不去管它。接着我们使用 CSS 进行样式的设置。

img {
  width: 400px;
  height: 400px;
}

显示结果

此时,我们的 p 标签被遮盖了,其实它是存在的。原因就在于我们使用了绝对定位,导致了这个图片脱离了文档流。

接着我们使用 cilp 属性吧:

img {
  position: absolute;
  clip: rect(50px 300px 300px 100px);*
}

最终的结果如下图所示:


最终结果

这个图片就被我们所剪裁了。

虽然好像这个属性我们平时没怎么用,但是在某些情况下应该还是非常好用的。主要可能由于clip它有其他的替代方案,因此它没有被重视。

不过没关系,我们已经学习到了,以后用得上的时候我们再使用它就好。