CSS clip 属性
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 属性值。
应用案例
- 隐藏元素部分内容
div {
clip: rect(0px 30px 100px 0px);
}
这个例子将div元素裁剪成一个左上角为(0,0),右下角为(30,100)的矩形区域。这会隐藏div元素左上角的30像素宽和100像素高的区域。
- 剪裁自定义形状
img {
position: absolute;
clip: polygon(50% 100%, 0 0, 100% 0);
}
这个例子使用了 polygon
函数,将一个图像裁剪为钻石形状,并使用绝对定位使其显示在一个类似海报的设计中。
注意事项
clip
属性一般用于定位和遮罩,但这个属性已被废弃,建议使用clip-path
属性。- 在动画和过渡中,避免使用
clip
属性,因为它本身就会引起重排和重绘等性能问题。