css中clip-path属性怎么用？用法讲解附代码示例

clip-path属性可以通过指定裁剪区域来决定元素哪部分可见，裁剪区域之外的部分会被隐藏，这个属性不需要改变元素本身的布局结构，就能实现各种特殊的显示效果，在卡片设计、图片展示等场景中应用非常广泛。

clip-path基本语法

clip-path的常用语法格式如下，支持多种裁剪函数，不同的函数对应不同的裁剪形状：

/* 基本语法结构 */
.element {
    clip-path: 裁剪函数(参数);
}

常见裁剪形状实现

圆形裁剪

使用circle()函数可以实现圆形裁剪，第一个参数是圆的半径，第二个参数是圆心位置，圆心位置默认是元素中心。

/* 裁剪出半径为50px的圆形，圆心在元素中心 */
.circle-box {
    width: 200px;
    height: 200px;
    background: #409eff;
    clip-path: circle(50px at 50% 50%);
}

/* 裁剪出占元素宽高一半的圆形 */
.circle-box2 {
    width: 200px;
    height: 200px;
    background: #67c23a;
    clip-path: circle(50% at 50% 50%);
}

椭圆形裁剪

使用ellipse()函数可以实现椭圆形裁剪，前两个参数分别是椭圆的水平半径和垂直半径，第三个参数是椭圆中心位置。

/* 水平半径80px，垂直半径40px的椭圆形 */
.ellipse-box {
    width: 200px;
    height: 200px;
    background: #e6a23c;
    clip-path: ellipse(80px 40px at 50% 50%);
}

多边形裁剪

使用polygon()函数可以实现自定义多边形裁剪，参数是一系列坐标点，坐标点按顺序连接形成裁剪区域，坐标可以用百分比或者具体像素值。

/* 三角形裁剪，三个坐标点分别是顶部中点、左下角、右下角 */
.triangle-box {
    width: 200px;
    height: 200px;
    background: #f56c6c;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 五边形裁剪 */
.pentagon-box {
    width: 200px;
    height: 200px;
    background: #909399;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

inset矩形裁剪

使用inset()函数可以实现矩形内缩裁剪，参数分别是上、右、下、左四个方向的内缩距离，还可以设置圆角。

/* 四周内缩20px的矩形 */
.inset-box {
    width: 200px;
    height: 200px;
    background: #409eff;
    clip-path: inset(20px 20px 20px 20px);
}

/* 带10px圆角的内缩矩形 */
.inset-radius-box {
    width: 200px;
    height: 200px;
    background: #67c23a;
    clip-path: inset(20px round 10px);
}

使用注意事项

• clip-path裁剪不会影响元素的布局占位，只是视觉上隐藏了部分区域。
• 裁剪区域之外的部分无法触发点击事件，事件触发范围仅限于可见区域。
• 部分旧版本浏览器需要添加前缀支持，比如-webkit-clip-path。
• 如果需要对裁剪做动画效果，可以配合transition属性使用，不过复杂多边形的动画可能会有性能问题。

兼容情况参考

以下是clip-path的主流浏览器支持情况：

cssclip-path裁剪图形多边形裁剪路径裁剪修改时间：2026-06-29 06:39:26