By

文章目录

翻译自codrops

剪辑属性用于剪除元素的区域，只保留元素的一部分可见

在元素被裁剪之后可见的元素的部分被称为剪切区域。剪辑应用于元素的border-box区域，该区域最初是完全可见的。剪切一个元素类似于裁剪它。

使用clip，您可以指定向内指定要从中剪除元素边缘的区域的偏移量。

clip属性只接受一个形状函数，即rect（）函数作为一个值。 rect（）函数需要四个参数，这些参数是元素的顶部和左侧边界的偏移量。

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

顶部和底部的值定义了从顶部边框的偏移量，左侧和右边的值均定义了左边界的偏移量。

剪辑区域或元素被裁剪后保持可见的元素部分由rect（）函数的偏移定义，如上图所示。

元素的裁剪区域剪裁位于裁剪区域之外的元素的任何方面（例如，content, children, background, borders, text decoration, outline和可见滚动机制（如果有的话））。被剪辑的内容不会导致溢出。

官方语法

  • 语法
1
clip: auto | rect() | inherit;

where

1
rect() = rect(<top>, <right>, <bottom>, <left>), and <top>, <right>, <bottom>, <left> are all <length> values

  • 初始值: auto

  • 适用于: 绝对定位的元素

  • 动画：rect（）函数的偏移量接受值，因此可以作为一个长度来动画化

示例

文章目录