clip-path单位选择取决于响应式需求：百分比适配缩放但比例固定，像素值适合固定尺寸；需注意position、overflow、单位混用及DPR导致的模糊问题。
clip-path 用百分比还是像素值？
取决于你是否需要响应式。用百分比（比如 polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%)）能随容器缩放，但形状比例固定；用像素（polygon(0px 0px, 200px 0px, 200px 100px, 100px 200px, 0px 100px)）在固定尺寸场景下更可控，一换容器就可能错位。
常见错误现象：clip-path 写了但没效果——大概率是元素没设置 position（非 static）或被父级 overflow: hidden 截断了裁剪区域。
- 响应式布局优先选百分比 +
box-sizing: border-box - 图标/按钮等固定尺寸组件可用像素，配合
transform: scale()微调时更稳定 - 不要对
img直接用clip-path后又加object-fit，两者行为冲突，图像会意外拉伸或偏移
SVG path 和 CSS polygon 哪个更靠谱？
clip-path 支持两种来源：内联 polygon() 函数，或引用外部/内联 SVG 的 <path>。前者写法直白，后者精度高、可复用、支持贝塞尔曲线。
使用场景：做波浪形顶部（inset() 不够用）、带弧度的对话框气泡、或者需要和设计稿完全对齐的路径，必须用 SVG <path>；简单三角、梯形、六边形，polygon() 更快上手。
立即学习“前端免费学习笔记（深入）”；
-
polygon()的坐标系是相对元素盒模型的，(0 0) 是左上角 - SVG
<path>的坐标系默认是 SVG viewport，需注意viewBox设置，否则路径可能被压缩或偏移 - Chrome 和 Safari 对
clip-path: url(#myPath)的缓存较激进，动态修改 SVG 路径后要强制重绘（比如 toggle class 或改clip-path值）
clip-path 在移动端真能用吗？
能，但得避开老安卓 WebView 和 iOS 12.5 以下。iOS 13+、Android Chrome 80+ 基本没问题；问题多出在混合开发里——比如 Cordova 或某些小程序 WebView 内核版本卡在 Android 4.4，clip-path 直接不解析。
性能影响：复杂路径（顶点多于 20 个点）在低端机上滚动时可能掉帧，尤其叠加了 filter 或 transform。
- 上线前务必在真机（尤其是红米、华为旧机型）跑一遍
clip-path动画 - 用
will-change: clip-path可提升部分机型渲染效率，但别滥用，会增加内存开销 - 降级方案不是用
border-radius模拟，而是直接 fallback 到矩形 + 阴影/背景图拼接，视觉损失小且稳定
为什么 clip-path 裁剪后文字模糊或锯齿严重？
本质是 GPU 渲染时亚像素对齐失败。CSS 裁剪本身不抗锯齿，浏览器对非直角边缘的采样策略在不同缩放比下差异很大。
最容易被忽略的是 DPR（设备像素比）影响：在 2x 屏上，polygon() 里写 1px 实际是 2 物理像素，但路径计算仍按逻辑像素走，导致边缘发虚。
- 避免在
clip-path中混用px和%单位（比如polygon(0% 0%, 100% 0%, 100% 1px, 50% 100%, 0% 1px)） - 给裁剪元素加
-webkit-backface-visibility: hidden，强制启用硬件加速，能缓解多数模糊 - 如果内容含小字号文字，宁可不用
clip-path裁剪文字容器，改用mask-image配合 PNG 透明蒙版，控制力更强
