clip-path没效果主因是渲染上下文被破坏：父容器缺overflow:hidden或transform:translatez(0)致裁剪溢出；子元素absolute而父级static导致截断；img配object-fit:cover会冲突；元素无显式宽高使百分比失效。
能裁，但直接写 polygon() 很容易白忙活——真正卡住的不是“怎么画”，而是坐标系理解错、父容器截断、浏览器不认。
为什么写了 clip-path 却没效果？
90% 是渲染上下文被破坏，不是语法错。
- 父容器没设
overflow: hidden或transform: translateZ(0)→ 裁剪区域溢出，内容照常显示 - 父级是
position: static（默认），子元素却用position: absolute→ 裁剪框可能被截断或整个消失 - 对
<img>同时用了clip-path和object-fit: cover→ 行为冲突，图像拉伸/偏移不可控 - 元素本身没显式宽高（比如
display: inline的<img>）→polygon()百分比无参照，直接失效
polygon() 坐标怎么写才不偏移、不变形？
坐标原点永远在元素 content box 左上角，x 向右、y 向下，所有百分比都按当前元素计算出的宽高算。
- 别把 Sketch 或 Figma 导出的绝对像素坐标（如
24px 36px）直接塞进polygon()，一换屏幕尺寸就全偏移 - 调试时先加
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)确认基准，再逐点调 - 顶点必须统一按顺时针（或统一逆时针）闭合排列，否则裁反了——本该保留的被裁掉，本该裁掉的反而留下
- 移动端 Safari 对小数敏感，
23.5%比23.54%更稳；Chrome DevTools Styles 面板里勾选clip-path可视化图标，拖点实时看
怎么让 box-shadow 和 border 也被裁掉？
clip-path 默认只裁绘制区域，box-shadow 和 border 属于“绘制层外溢出”，Safari 尤其明显。
- 加
isolation: isolate强制创建独立层叠上下文，让裁剪作用域包含阴影和边框 - 或者改用
filter: drop-shadow()替代box-shadow，它天然受clip-path影响（注意：不支持内阴影） - 别指望
clip-path裁掉outline—— 它完全游离于盒模型之外，根本不受影响
Safari 和旧版 Edge 兼容怎么搞？
新版 Safari（≥15.4）支持 polygon()，但旧版只认 SVG 引用；Edge ≤18 根本不支持 CSS 版 polygon()。
- 别写
-webkit-clip-path—— 新版已废弃，反而干扰标准语法 - 正确做法：内联 SVG +
url(#id)，<svg></svg>必须在 DOM 里（不能外链），且id匹配 - 用
@supports (clip-path: polygon(0 0))包裹样式，老浏览器自动跳过 - 如果必须支持 IE，只能放弃
clip-path，改用canvas裁剪或服务端生成带 alpha 通道的 PNG
最常被忽略的是 DPR（设备像素比）影响：在 2x 屏上，polygon() 里写 1px 实际是 2 物理像素，但路径计算仍按逻辑像素走，导致边缘发虚。真机测试不能跳过，尤其红米、华为旧机型滚动时容易掉帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
