裁剪路径属性
最后更新：2026-09-13
clip-path 裁剪路径属性
clip-path 用于将元素裁剪为指定的几何形状（如圆形、多边形、椭圆等），只显示形状内的部分，形状外的内容会被隐藏。相比传统的 overflow: hidden 矩形裁剪，clip-path 能实现任意形状的可见区域，是创意排版和视觉特效的利器。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
clip-path: none | <clip-source> | <basic-shape> | <geometry-box>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | 关键字 | 无裁剪 |
<clip-source> | <basic-shape> | <geometry-box> | 值 | 裁剪路径 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| clip-path | ✓ v55 | ✓ v79 | ✓ v3.5 | ✓ v9.1 | ✓ v42 |
| 所有主流浏览器均支持 | |||||
提示： polygon() 是最灵活的裁剪函数，可以定义任意多边形；配合在线生成工具（如 Clippy）可以快速获得坐标值。
注意： clip-path 会同时裁剪元素的内容和交互区域；被裁剪掉的部分无法响应鼠标事件。
❓ 常见问题
Qclip-path 和 mask 有什么区别？
Aclip-path 是硬裁剪，只保留裁剪区域内的部分，区域外完全不可见且不响应事件，边缘是硬边；mask 是基于 alpha 的遮罩，支持半透明渐变，可以实现柔和的渐隐边缘。clip-path 适合几何形状裁剪，mask 适合用图片或渐变做柔和过渡。
Qclip-path 能动画吗？
A可以。条件是前后两个状态的函数类型相同且顶点数量一致，例如两个 polygon() 都写 4 个顶点，或用 circle() 过渡到更大的 circle()，这时支持 transition 和 animation。顶点数量不同（如三角形变五边形）则无法插值，需要先补齐到相同数量。
Qclip-path 如何裁剪成圆形、多边形？坐标怎么理解？
Acircle(50%) 是圆形，可加 at 指定圆心，如 circle(50% at 30% 40%)；polygon() 用百分比坐标定义顶点，如 polygon(50% 0%, 100% 100%, 0% 100%) 是三角形，坐标都相对于元素自身宽高。建议用 Clippy 等可视化工具拖拽生成坐标，再微调。
Qclip-path 会影响鼠标点击区域吗？
A会。clip-path 裁剪掉的区域不仅不可见，也无法响应鼠标事件，元素的命中区域（hit-test）以裁剪后的形状为准。利用这一点可以精确控制可点击范围，但也意味着被裁剪的部分不能放交互元素。若只想隐藏视觉而保留点击区域，应改用 mask 或 visibility。
🏷️ 相关属性
💡 相关案例
📚 相关教程
