clip-path坐标系原点在元素content box左上角，且不受position、transform影响；失效主因是父容器overflow:hidden截断或定位上下文缺失。
直接说结论：用 clip-path 实现不规则形状切割，核心不是“怎么画”，而是“坐标系怎么算、父容器怎么配、浏览器怎么扛”。写对了 polygon() 却没效果，90% 是被 overflow: hidden 截断或定位上下文缺失坑了。
clip-path 的坐标系默认从哪开始？
clip-path 所有函数（polygon、circle、ellipse）的坐标原点都在元素自身的 content box 左上角，且完全不受 position、transform 影响——它只认元素自己的宽高。
-
polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)就是原始矩形，100%指该元素当前计算出的 width/height - 如果元素有
padding: 20px或border: 5px solid，裁剪区域仍从 content box 左上角起算，视觉上会“看起来偏移” - 想让圆形居中，别只写
circle(50% at 50% 50%)，先确认元素是display: block或inline-block，且没被vertical-align拉歪基线
为什么写了 clip-path 却没裁剪效果？
最常见失效场景不是语法错，而是渲染上下文被破坏。尤其在绝对定位或动画中，clip-path 很容易“失联”。
- 父容器没设
overflow: hidden或transform: translateZ(0)→ 裁剪区域溢出，内容照常显示 - 父级是
position: static（默认），而子元素position: absolute→ 裁剪框可能被截断或整个消失 - 对
clip-path后又设object-fit: cover→ 两者行为冲突，图像拉伸/偏移不可控 - Firefox 中用
polygon()做transition动画 → 极大概率卡顿或不动，它对硬件加速支持弱
百分比 vs 像素值：什么时候该用哪个？
clip-path 的 polygon()、circle() 等函数内部不接受 px 单位（inset() 除外）。所谓“像素值”，实际只有两种可靠路径：
- 响应式场景一律用百分比：
polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%)，配合box-sizing: border-box更稳 - 需要像素级对齐（如贴合图标尺寸、UI组件固定宽高），改用内联 SVG：
clip-path: url(#star)引用 - 误写
polygon(0px 0px, 100px 0px, ...)→ 大部分浏览器忽略整条声明，静默失败
真正难的不是写出一个五角星，而是当它嵌在 flex 容器里、又被 transform 缩放、还要在 Safari 和 Firefox 里表现一致时，哪些细节会被漏掉——比如 clip-path 不继承、不触发重绘、不响应 will-change，这些都不是报错，而是无声失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
