旧版 safari（≤15.6）不认 polygon() 百分比坐标，会将 50% 50% 错解为 50px 50px；应改用整数像素坐标（如 polygon(0 0, 300 0, 150 300)），前提是元素宽高固定且单位统一，避免混用；同时需用 @supports (clip-path: polygon(0 0)) 降级或 svg 引用兜底。
旧版 Safari（≤15.6）不认 polygon() 百分比坐标怎么办
旧版 Safari 会把 50% 50% 当成 50px 50px 解析，导致裁剪位置严重偏移。这不是写错了，是渲染引擎 bug。
实操建议：
- 改用整数像素坐标，比如
polygon(0 0, 300 0, 150 300)，前提是元素宽高固定（如width: 300px; height: 300px;） - 避免混合单位，
50% 0和150px 0不能混写，整条声明会被忽略 - 调试时先加
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)看是否生效——如果这个都白屏，说明根本没进渲染管线
Edge ≤18 或 Firefox 未启用 clip-path 怎么 fallback
这些浏览器压根不支持 CSS 版 polygon()，@supports (clip-path: polygon(0 0)) 会直接跳过整个规则块，不是“部分失效”。
可行路径只有两个：
- 用内联 SVG 的
<clippath></clippath>+url(#id)引用，SVG 必须在 HTML 文档内（不能外链），且<svg></svg>要加width="0" height="0" style="position: absolute"隐藏但保留在 DOM 中 - 降级为纯视觉模拟：用多个伪元素（
::before/::after）拼出近似形状，但注意这无法裁掉box-shadow或响应鼠标事件
为什么加了 -webkit-clip-path 反而更糟
新版 Safari（≥15.4）、Chrome、Edge 已完全支持无前缀的 clip-path，而 -webkit-clip-path 在 Safari 16.4+ 被标记为废弃（deprecated），部分版本会优先匹配前缀版并忽略标准版。
正确做法：
- 只写标准语法
clip-path: polygon(...) - 用
@supports包裹，让老浏览器静默跳过：@supports (clip-path: polygon(0 0)) { .element { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); } } - 不要试图“多写一个前缀保底”，现代浏览器里这是自找麻烦
clip-path 裁不掉 box-shadow 和 border 的真实原因
这不是兼容性问题，而是规范行为：clip-path 默认只作用于元素的「绘制区域」（painting area），而 box-shadow 和 border 属于「层叠上下文外溢出」，Safari 尤其严格。
必须加 isolation: isolate 才能强制创建独立层叠上下文，让裁剪包含阴影和边框。漏掉这一句，哪怕 polygon 坐标全对，阴影照样露在外面。
容易被忽略的是：这个声明必须加在**目标元素本身**上，而不是父容器；且不能被其他层叠上下文（如 transform、opacity ）意外覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
