clip-path仅裁剪视觉区域，不改变事件热区，需用svg path叠加或配合overflow:hidden和定位解决点击问题；坐标应使用百分比基于content-box，避免像素值；safari等旧浏览器需svg兼容方案。
直接用 clip-path: polygon() 写坐标就能出特殊形状，但 90% 的失败不是语法错，而是坐标系理解偏差、父容器截断或 Safari 缺前缀。
为什么写了 clip-path 按钮却还是矩形可点
clip-path 只裁视觉区域，不改事件热区。浏览器仍按原始盒模型响应 hover/click，裁掉的角点照样能触发事件，空白处也可能误触。
别指望 pointer-events: polygon——它从未被任何浏览器实现，是废弃草案。
最稳解法：
- 给按钮加
pointer-events: none - 再叠一层同路径的
<path></path>SVG（fill="transparent"+pointer-events: auto） - 若用纯 CSS，必须配合
overflow: hidden和非static定位，否则 Safari 会透出裁剪外区域
polygon() 坐标怎么写才不偏移
所有百分比都基于元素 content-box 左上角，x 向右、y 向下，100% = 当前宽/高。绝对像素（如 24px）在响应式或高 DPI 下必然错位。
错误写法：polygon(24px 36px, 120px 36px, 72px 108px) → 换屏就飘
正确写法：polygon(12% 18%, 60% 18%, 36% 54%) → 自适应宽高
调试口诀：
- 先写
polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)确认基准 - 再逐点调
- Safari 对小数敏感，
23.5%比23.54%更可靠
Safari 和旧版 Edge 兼容必须绕开的坑
新版 Safari（≥15.4）支持 polygon()，但旧版只认 SVG 引用；Edge ≤18 根本不支持 CSS 版 clip-path 函数。
别写 -webkit-clip-path——新版已废弃，反而干扰标准解析。
兼容方案：
- 内联
<svg></svg>+clip-path: url(#myClip) -
<svg></svg>必须在 DOM 里（不能外链），且设width="0" height="0" style="position: absolute" - SVG 中的
<clippath></clippath>要加clipPathUnits="objectBoundingBox"，路径用 0–1 归一化坐标：d="M0.12 0.18 L0.6 0.18 L0.36 0.54 Z" - 用
@supports (clip-path: polygon(0 0))包裹样式，老浏览器自动跳过
动画和交互时容易卡死的点
clip-path 动画性能极敏感，尤其 polygon() 点数 >6 时，Chrome/Firefox 每帧重算几何交集，iOS Safari 更易掉帧。
仅对 inset() 和 circle() 做 transition 较稳，它们是解析式函数，可硬件加速。
要动多边形，优先用 transform: scale() + overflow: hidden 模拟，比直接动画 clip-path 流畅得多。
动态更新路径时，Chrome 可能缓存不重绘，安全做法：
- 先清
clip-path - 读
offsetWidth强制重排 - 再恢复样式
真正难的不是写出一个五角星，而是让那个五角星在 iPad 上不漏边、在 Safari 14 里可点击、在缩放 125% 时不变形、在 hover 时不动态掉帧——这些细节藏在百分比基准、SVG 单位、重排时机和 pointer-events 分层里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
