clip-path本身不画形状，只裁剪元素矩形区域；真正实现复杂几何形状的仅有polygon()和path()，但path()在Firefox中完全不支持，且二者均易因坐标系、父容器或单位错误而静默失效。
直接说结论：clip-path 本身不“画”形状，它只裁剪——把元素原本的矩形区域按路径“抠”出一个透明洞。真正能做出复杂几何（星形、心形、波浪边）的，只有 polygon() 和 path()，但后者在 Firefox 中至今不支持，且两者都极易因坐标系、父容器或单位写错而静默失效。
clip-path: polygon() 坐标怎么写才不偏移、不变形
- 坐标原点永远是元素自身的 content box 左上角，和
position、transform无关 - 百分比值（如
50% 0%）基于元素当前计算出的宽高，响应式首选；像素值（如100px 0px）会硬编码尺寸，一换容器就错位 - 写错单位会直接导致整条声明被浏览器忽略：
- ✅ 正确：
polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%) - ❌ 失效：
polygon(0px 0px, 100px 0px, ...)（多数浏览器静默丢弃）
- ✅ 正确：
- 六边形、平行四边形等规则多边形，建议用单位圆公式生成坐标，起始角设为
-30deg让顶部朝上，避免手算偏差 - 如果图形看起来“被压扁”，先检查父容器是否设置了
aspect-ratio或内部图片触发了高度拉伸——polygon()不认视口，只认盒模型实际尺寸
clip-path: path() 在 Chrome 正常、Firefox 不显示怎么办
- Firefox 完全不支持
path()函数，哪怕加-webkit-前缀也无效；必须降级为双声明 + SVG 引用方案 - 正确写法（仅对 Chromium 系列生效）：
element {<br> clip-path: path('M50,100 C20,80,20,40,50,20 C80,40,80,80,50,100 Z');<br> -webkit-clip-path: path('M50,100 C20,80,20,40,50,20 C80,40,80,80,50,100 Z');<br>} - 但注意：Firefox 仍会跳过这两行，所以生产环境必须搭配 fallback：
- 用
clip-path: url(#my-clip)引用内联 SVG 的<clipPath> - SVG 中用
<path d="...">描述形状，并确保viewBox与目标元素宽高比例一致
- 用
- 路径字符串中空格和逗号不能省略或粘连：
C 20 80,20 40（逗号后缺空格）在部分版本 Safari 会解析失败
为什么写了 clip-path 却完全没效果
- 最常见原因不是语法错，而是渲染上下文被破坏：
- 父容器没设
overflow: hidden→ 裁剪区域溢出，内容照常显示 - 父级是
position: static，子元素是position: absolute→ 裁剪框可能被截断或消失 - 对
<img>同时用了clip-path和object-fit: cover→ 行为冲突，图像偏移不可控
- 父容器没设
-
clip-path不继承、不触发重绘、不响应will-change，改了变量也不会自动更新 - Safari 和 Chrome 对
url(#id)缓存激进，动态修改 SVG 路径后需强制重绘（例如切换 class 或临时清空再设回clip-path值）
动态裁剪能不能用 CSS 变量控制坐标
-
不能直接插值：
clip-path: polygon(var(--x1) var(--y1), ...)会被所有浏览器当作无效声明丢弃 - 可行路径只有两条：
- 用内联 SVG + CSS 自定义属性控制
<clipPath>的transform（如translate(var(--tx), var(--ty)) scale(var(--s))），最稳，兼容性好 - 在 Chromium 117+ 中，
path()内部可用calc()做简单计算（如L calc(100% - 20px), 50%），但字符串本身不能拼接变量
- 用内联 SVG + CSS 自定义属性控制
- 百分比坐标虽灵活，但无法实现“随鼠标移动的镂空”这类真动态效果——那得靠 JS 实时写入
style.clipPath，或用 Canvas 替代
真正难的不是写出一个五角星，而是当它嵌在 flex 容器里、又被 transform 缩放、还要在 Safari 和 Firefox 里表现一致时，哪些细节会被漏掉：比如 clip-path 不继承、不响应 will-change、Firefox 对动画支持极弱——这些都不是报错，而是静默失败。
