CSS clip-path 路径裁剪生成器

clip-path 属性裁剪元素的可视区域，支持四类函数：
① polygon(x1% y1%, x2% y2%, ...) 多边形，由顶点列表定义形状，至少 3 个顶点
② circle(r% at cx% cy%) 圆形，半径 r 与中心坐标（cx, cy）
③ ellipse(rx% ry% at cx% cy%) 椭圆，水平半径 rx、垂直半径 ry 与中心坐标
④ inset(top% right% bottom% left% round rpx) 内嵌矩形，四边内缩距离与可选圆角
此外还支持 path()（SVG 路径语法）和引用 SVG <clipPath> 元素。 坐标可使用百分比（相对元素自身宽高）或像素值。本工具覆盖前四种最常用函数。

切换到"多边形"类型后，预览区下方会出现 SVG 交互式编辑器：
① 拖拽顶点：按住任意白色圆点拖动，实时调整顶点位置
② 添加顶点：点击编辑器空白区域，在选中顶点之后（或末尾）插入新顶点
③ 选中顶点：点击顶点变为红色，表示已选中
④ 删除顶点：选中红色顶点后点击"删除选中点"按钮（至少保留 3 个顶点构成多边形）
顶点坐标以百分比表示（0-100%），相对元素自身宽高。配合预设可快速生成三角形、星形等常见形状。

circle(r% at cx% cy%)：r 是半径（百分比，相对元素对角线长度的一半）， cx/cy 是圆心坐标（百分比，相对元素宽高）。例如 circle(50% at 50% 50%) 是居中圆形，circle(50% at 0% 0%) 圆心在左上角。
ellipse(rx% ry% at cx% cy%)：rx 是水平半径、ry 是垂直半径， 分别相对元素宽度和高度。例如 ellipse(50% 30% at 50% 50%) 是水平宽、垂直窄的椭圆。
百分比单位使裁剪区域随元素尺寸自适应，适合响应式布局。

inset(top right bottom left round rpx) 从四边向内缩进指定距离后形成矩形裁剪区域， round 关键字后的值定义矩形四角的圆角半径。例如 inset(10% 10% 10% 10% round 20px) 生成四边各缩进 10%、圆角 20px 的圆角矩形。
这比 border-radius 更灵活——border-radius 只圆角不裁剪内容， inset round 既裁剪又圆角。round 参数支持与 border-radius 相同的语法（单值、四角独立、椭圆八值斜杠语法）。
省略 round 时裁剪为直角矩形。

三者都能"裁剪"元素，但原理与适用场景不同：
① overflow: hidden：裁剪超出元素盒模型的内容（子元素溢出部分）， 只能矩形裁剪，无法创建异形。常用于防止内容溢出布局。
② border-radius：圆角化元素的可视区域与背景，但不裁剪子元素内容 （子元素仍可溢出到圆角外，除非配合 overflow: hidden）。仅支持圆角形状。
③ clip-path：按任意路径（多边形、圆形、椭圆、SVG 路径）裁剪元素 及其子元素，是最灵活的裁剪方式。可创建三角形、星形等任意形状，且裁剪子元素内容。
三者可组合使用：border-radius + overflow:hidden 处理圆角容器溢出，clip-path 处理创意异形。

clip-path 是 GPU 合成属性，不触发重排（reflow），仅触发重绘（repaint）+ 合成（composite）， 性能开销可控。但需注意：
① 避免对大元素使用复杂 path()：SVG 路径裁剪计算量较大，大元素配合动画可能卡顿
② polygon 顶点不宜过多：顶点数超过 20 个时，每帧重绘计算量增加， 建议动画场景控制在 10 个顶点以内
③ 配合 transition/animation 使用：clip-path 的 polygon 顶点动画 需顶点数相同才能插值，否则无法平滑过渡
④ 静态场景无性能顾虑：非动画场景下 clip-path 开销极小，可自由使用

clip-path 是 CSS Masking Module Level 1 标准，现代浏览器全面支持：
① polygon/circle/ellipse/inset：Chrome 55+、Firefox 54+、Safari 13.1+、Edge 79+ 全面支持，无需前缀
② path()：Chrome 88+、Firefox 71+、Safari 13.1+ 支持
③ 旧版 Safari（13.0 及以下）需要 -webkit-clip-path 前缀
④ IE 完全不支持 clip-path，需降级为 overflow:hidden + border-radius 或 SVG 蒙版
生产环境建议同时输出 clip-path 和 -webkit-clip-path 以兼容旧版 Safari。 本工具生成的代码仅含标准属性，旧版 Safari 需手动添加前缀。

本工具是纯前端应用，所有裁剪参数计算与预览渲染均在浏览器本地完成：
① 不上传任何图片或数据到服务器，零网络请求
② 不使用 Cookie、LocalStorage 存储用户数据
③ 不接入任何统计、广告、第三方追踪脚本
④ 生成的 CSS 代码仅由参数本地计算得出，不经过任何外部服务
可放心用于商业项目调试。配套的博客文章深入讲解 clip-path 原理与应用场景， 欢迎结合 border-radius 生成器、 transform 可视化、filter 滤镜 形成完整 CSS 视觉效果工具链。