clip-path在Chrome 62–97中不生效，因Blink引擎仅支持废弃的-webkit-clip-path（限inset/circle），polygon等现代语法需Chrome 98+；应降级用border-radius、mask-image或SVG clipPath。
clip-path 在 Chrome 62–97（尤其是 Android WebView 和旧版桌面 Chrome）中不生效，不是漏写了前缀，而是这些版本压根没实现标准语法——加 -webkit-clip-path 也不行，必须换方案。
Chrome 62–97 不支持 clip-path 的根本原因
这些版本的 Blink 引擎只实现了极早期、已废弃的 -webkit-clip-path（仅支持 inset() 和 circle()，且参数单位受限），而现代 clip-path（如 polygon()、path()、百分比坐标）在 Chrome 98+ 才完整落地。写 -webkit-clip-path: polygon(...) 会被直接忽略，浏览器连解析都不做。
- 查证方式：打开 DevTools → Elements 面板，看该样式是否被划掉（invalid）或完全不出现
- 典型错误现象：
clip-path: polygon(0 0, 100% 0, 100% 100%)在 Chrome 95 中渲染为完整矩形，无裁剪 - Android WebView 75–96 同样卡在这个断层，不能靠 UA 判断，必须实测
替代方案优先级：从兼容性到可控性
别硬扛前缀，直接降级到浏览器真正支持的机制：
-
border-radius：圆角/圆形裁剪首选，IE9+ 全支持，border-radius: 50%裁等比圆形，简单可靠 -
mask-image+ PNG 或渐变：Edge 16+、Chrome 75+ 支持，但注意radial-gradient在 Chrome 84–97 中对mask-image的支持不稳定，建议加-webkit-mask-image前缀并 fallback 到 PNG - SVG
<clippath></clippath>内联引用：必须用clip-path: url(#id)，且 SVG 必须在当前 HTML 文档内（不能外链），<clippath clippathunits="objectBoundingBox"></clippath>才能响应式缩放 - 绝对定位 +
overflow: hidden模拟：对矩形裁剪有效，例如父容器设overflow: hidden、子元素用position: absolute偏移，适合 banner 图片裁顶/底
哪些写法会踩坑？
即使加了前缀，这些操作仍会导致失效：
立即学习“前端免费学习笔记（深入）”；
- 对
display: inline元素直接应用clip-path：必须设display: block或inline-block，或加position: relative - 父容器
overflow: visible（默认值）且未形成新层叠上下文：裁剪区域可能被撑开，加transform: translateZ(0)或isolation: isolate强制创建 - 用
clip-path: url(#my.clip)时 ID 含点号：ID 必须是合法 CSS 标识符，#my.clip应改为#my_clip - 在
<table> 或 <code><td> 上直接使用：部分旧 Chrome 对表格单元格的盒模型处理异常，务必外包一层 <code><div> <h3>最后检查点：伪元素和事件区域</h3> <p><code>clip-path会同时裁剪内容、背景、边框和伪元素（如::before/::after）。如果发现箭头或装饰图标消失，不是样式没加载，而是被父元素裁掉了——得把伪元素提到父容器外层，或改用mask-image分离控制。另外，裁剪后点击区域可能变小甚至失效，某些 Chrome 版本会默认禁用裁剪区外的 pointer-events，需显式加
pointer-events: auto。真正麻烦的从来不是写法，而是你以为它“应该支持”，结果在用户手机上白屏了一整块。先跑通 Chrome 75，再谈 Chrome 115 的
path()动画。
