CSS Clip属性

CSS clip属性是一个用于控制元素可见区域的属性。它可以将元素的可见区域限制在一个矩形框内，从而隐藏元素的某个部分或将元素裁剪成任意形状。

语法

/* 矩形剪裁 */
clip: rect(top, right, bottom, left);

/* 自定义剪裁 */
clip: shape(shape);

矩形剪裁（rect）

• top: 元素上边缘距离视图上边缘的距离。
• right: 元素右边缘距离视图左边缘的距离。
• bottom: 元素下边缘距离视图上边缘的距离。
• left: 元素左边缘距离视图左边缘的距离。

注意：top 和 left 的值不能小于 0。

自定义剪裁（shape）

• inset(<length>, <length>, <length>, <length>): 按照顺序定义clip矩形的四个边的距离（顺序：顶部、右边、底部、左边）。
• circle(<radius> at <x> <y>): 定义一个圆形裁剪区域，x 和 y 表示圆心的坐标，radius 表示半径。
• ellipse(<radius-x> <radius-y> at <x> <y>): 定义一个椭圆形裁剪区域，x 和 y 表示中心点的坐标，radius-x 和 radius-y 分别表示椭圆的水平和垂直半径。
• polygon(<point> <point> <point> ... ): 定义一个多边形裁剪区域，每个点都由一个 X 和 Y 坐标定义（例如，5px 10px）。

属性值

• auto: 默认值，表示不进行裁剪。
• inherit: 继承父元素的 clip 属性值。

应用案例

1. 隐藏元素部分内容

div {
  clip: rect(0px 30px 100px 0px);
}

这个例子将div元素裁剪成一个左上角为(0,0)，右下角为(30,100)的矩形区域。这会隐藏div元素左上角的30像素宽和100像素高的区域。

2. 剪裁自定义形状

img {
  position: absolute;
  clip: polygon(50% 100%, 0 0, 100% 0);
}

这个例子使用了 polygon 函数，将一个图像裁剪为钻石形状，并使用绝对定位使其显示在一个类似海报的设计中。

注意事项

• clip 属性一般用于定位和遮罩，但这个属性已被废弃，建议使用 clip-path 属性。
• 在动画和过渡中，避免使用 clip 属性，因为它本身就会引起重排和重绘等性能问题。