clip-path polygon()生效需满足三要素：坐标基于元素border-box且统一用%单位、顶点按顺时针（或统一逆时针）闭合排列、元素设非static定位且父容器无overflow:hidden；safari须加-webkit-前缀，否则静默失效。
直接用 clip-path 就能裁出自定义形状，但写错一个百分号、漏个 position: relative 或在 Safari 里没加 -webkit-clip-path，整块就白写了。
clip-path polygon() 坐标为什么总偏移或反转
不是语法报错，是坐标基准和顺序被忽略了：polygon() 所有数值默认按元素自身的 border-box 计算，单位用 % 最稳；顺序必须闭合且统一顺时针（或统一逆时针），否则浏览器会把“该显示的区域”当成“该裁掉的区域”。
- 错误示例：
polygon(0 0, 100px 0, 100px 50px)→ 没闭合、混用px和无单位值，缩放后严重错位 - 正确写法：
polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%)→ 闭合、全%、顺时针 - 调试技巧：在 Chrome DevTools 里删掉最后一个点再补上，能强制重绘并暴露方向问题
- 别用小数像素如
0.5px—— Safari 对 sub-pixel 渲染不稳定，容易锯齿或漏显
circle() 和 ellipse() 圆心与半径怎么算才不翻车
circle(r at cx cy) 看似简单，但 r 的单位含义随上下文突变：当写 circle(50%)，半径 = 元素宽高中的较小值 × 0.5；而 circle(50% at 50% 50%) 的圆心才是真居中，且半径仍只认较短边。
- 想覆盖整个正方形？用
circle(50% at 50% 50%) - 想覆盖宽高不等的矩形？得手动算：比如
width: 300px; height: 150px，用circle(150px at 150px 75px) - 避免
circle(100%)—— 它在长方形里只是内切圆，上下或左右必留白 - Safari ≤13.0 不支持百分比半径，检测写法：
@supports (clip-path: circle(50%)) { ... }
复杂图形（星形、波浪边）为什么不能硬写 path()
clip-path: path("M...") 在 Safari 15.4+ 才开始支持，且路径字符串需手动转义双引号、精度受 CSS 解析限制；更关键的是——它无法响应式缩放，同一段 path("M10 10 L90 10...") 在 DPR=2 和 DPR=3 设备上边缘会漂移。
- 真正可靠的方案是 SVG
<clippath></clippath>引用：clip-path: url(#star) - SVG 中坐标用
objectBoundingBox单位（0–1 范围），例如星形顶点写M0.5,0 L0.61,0.35...，缩放/暗色模式/DPR 下都稳 -
<clippath></clippath>必须放在<defs></defs>内，且内联 SVG 需设width="0" height="0" style="position: absolute"避免占位 - 需要“挖空”效果（如环形徽章）？用
clip-rule: evenodd，纯 CSSpolygon()做不了
clip-path 生效却看不见？先查这三件事
90% 的“没效果”不是代码错，是被底层规则卡住了。
- 元素
position是static（默认值）→ 加position: relative或absolute - 父容器有
overflow: hidden→ 它会截断clip-path生成的渲染层，二者叠加行为不可控，只留其一 - Safari 不生效 → 补
-webkit-clip-path，且确认没用它不支持的path()或含小数坐标的polygon() - 图片裁不齐？确认用的是
<img>标签，不是background-image—— 后者对clip-path完全无效
真正难的从来不是画出那个形状，而是让它的顶点在 125% 缩放、DPR=3 的 iPhone、暗色模式切换、甚至 font-size 变化时，依然严丝合缝地贴着元素边缘——这时候，硬编码 px 和随意颠倒 polygon 顺序，就是最隐蔽的坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
