CSS clip-path 是用形状定义裁切边界、把元素渲染输出按形状”切割”的属性。它是 CSS 做不规则形状最强大的原生能力——可以做出多边形、圆、椭圆、内嵌矩形，配合动画还能实现幕布拉开、心形扩张等过渡效果。
| 形状 | 语法 | 适用 |
|---|---|---|
| polygon | polygon(x1 y1, x2 y2, ...) | 任意多边形（星形、箭头、气泡、菱形） |
| circle | circle(r at cx cy) | 头像、按钮、波纹动画 |
| ellipse | ellipse(rx ry at cx cy) | 椭圆裁切、装饰元素 |
| inset | inset(top right bottom left round r) | 内嵌矩形（带圆角），常用于反向”画框” |
clip-path 只裁渲染输出，元素仍占原始矩形空间。这意味着：
pointer-events: none 屏蔽transition 形变，做”展开”、“幕布”等高级动画vs overflow: hidden + border-radius — 简单圆 / 矩形圆角两者等效，但 clip-path 形状自由度远高，且支持 transition 形变。
vs SVG <clipPath> — CSS clip-path 性能略好、写法简洁，但不支持曲线 path（贝塞尔等）；SVG 复杂路径裁切更强但需引用 <defs>。
Chrome 55+ / Firefox 54+ / Edge 79+ 均支持非前缀；Safari 仍需 -webkit-clip-path 前缀保证 iOS 老版兼容，生产代码建议两行并存。本工具直接输出标准语法，如需兼容 iOS Safari < 14，自行追加 -webkit-clip-path 一行。
静态形状成本可忽略；轻量动画（圆扩张、inset 拉开）非常顺滑；数十个顶点的 polygon 同时形变 在移动端低端机可能掉帧——这种场景建议先简化顶点数或改用 SVG 实现。
功能 95% 重叠，但 clip-path 形状自由度高得多。border-radius 只能做矩形圆角；clip-path 可做任意多边形、椭圆、内嵌矩形、SVG 路径。布局影响也不同：clip-path 不影响布局空间——元素仍占完整矩形的位置，只是渲染时按形状裁剪；border-radius 也不影响布局。关键差异在 transition——clip-path 可平滑动画形变，做"幕布拉开"、"心形扩张"等动画；border-radius 改变值时只能渐变圆角不能变形状。简单圆/矩形圆角用 border-radius；其他场景用 clip-path。
这是规范行为——clip-path 只裁剪渲染输出，不影响布局盒模型。例如把元素裁成三角形，它仍然占原始矩形的宽高，相邻元素不会"贴上来"。这意味着 (1) 鼠标 hover 在被裁掉的透明区域仍会触发事件——需要的话用 pointer-events: none 配合形状蒙版；(2) 多个 clip-path 元素紧挨着会有"看不见的间距"，要用负 margin / 绝对定位重叠它们。这是 clip-path 和 SVG <clipPath> 一致的处理方式。
polygon(x1 y1, x2 y2, ...) 中每对坐标是一个顶点，按列出顺序依次连线、最后一个点自动连回第一个点闭合。坐标系：左上角 (0, 0)、右下角 (100% 100%)，与 CSS 主流坐标方向一致（X 向右、Y 向下）。单位混用允许——可以 polygon(50% 0px, 100% 50%, 50% 100%, 0px 50%)，但通常推荐统一用百分比，元素尺寸变化时形状自动跟随。本工具默认全用百分比。
用 polygon 走"奇偶填充"绕路即可——CSS clip-path: polygon() 默认遵循 even-odd fill rule。具体写法是用一条线把外边界和内洞连接起来，使两者成为同一条 polygon 路径。但更常见的做法是 (1) 用 mask-image 做镂空（支持 SVG mask、组合多个图像）；(2) 用 SVG <clipPath> 配合 clip-rule: evenodd 引用外部路径；(3) 用伪元素 + clip-path 双层叠加。本工具的 inset 形状是最简单的"挖洞"原型——可以从外侧裁掉一圈，留下中间矩形。
全部主流浏览器都支持非前缀语法。Chrome 55+（2016）、Firefox 54+（2017）、Safari 9.1+（2016 用 -webkit- 前缀）、Edge 79+（2020）。Safari 仍需要 -webkit-clip-path 前缀以保证旧版兼容（iOS Safari < 14），生产代码建议同时输出 -webkit- 和无前缀两行。本工具复制的代码只输出标准语法；如需兼容老 Safari，加一行 -webkit-clip-path: 同样的值; 即可。
CSS clip-path 的形变动画由 GPU 合成，在桌面端基本零成本；移动端低端机大形状（多顶点 polygon）+ 高频帧（60fps 实时形变）时 CPU 略吃力。安全用法：(1) 静态形状 → 任意复杂度都没问题；(2) 单一形状的轻动画（圆扩张、inset 拉开）→ 非常顺；(3) 数十个顶点的 polygon 同时形变 → 移动端可能掉帧，建议先做简化处理或降级为 SVG。比起 SVG <clipPath>，CSS clip-path 性能略好，但形状能力略弱（没有曲线 path）。