clip-path仅裁剪视觉区域，不改变事件热区，需用SVG path叠加或配合overflow:hidden和定位解决；坐标应使用百分比基于content box，Safari需注意前缀和小数精度，动画优先用transform模拟。
直接用 clip-path: polygon() 写按钮形状，90% 的失败不是语法错，而是坐标系理解偏差、父容器截断或 Safari 缺前缀。
为什么写了 clip-path 按钮却还是矩形可点
clip-path 只裁视觉区域，不改事件热区。浏览器仍按原始盒模型响应 hover/click，裁掉的角点照样能触发事件，空白处也可能误触。
- 别指望
pointer-events: polygon——它从未被任何浏览器实现，是废弃草案 - 最稳解法：给按钮加
pointer-events: none，再叠一层同路径的<path>SVG（fill="transparent"+pointer-events: auto） - 若用纯 CSS，必须配合
overflow: hidden和非static定位，否则 Safari 会透出裁剪外区域
clip-path: 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 +
clip-path: url(#myClip)，<svg>必须在 DOM 里（不能外链），且设width="0" height="0" style="position: absolute" - SVG 中的
<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强制重排，再恢复样式 - 别给静态裁剪加
will-change: clip-path—— 白占内存，无加速效果
真正难的不是画出形状，而是让每个像素的视觉边界和事件边界严丝合缝。Safari 的点击盲区、移动端小数坐标抖动、SVG 路径未闭合导致的透光——这些细节不手动测一遍，上线后就会在用户手指悬停时露馅。
