clip-path 中的 polygon()、circle() 等函数不支持 CSS 变量，因参数需在解析时确定；仅 path() 内 calc() 可含变量，但 Safari 不支持 path()，Firefox 也忽略；最可靠方案是 url(#id) 引用 SVG 并用 transform 绑定变量。
直接在 polygon() 或 path() 里写 var(--x) 会静默失效——浏览器不报错，但整条声明标为 “invalid”，裁剪完全不生效。
为什么 clip-path: polygon(var(--a) var(--b)) 总是无效
常见错误现象：DevTools 显示该属性灰掉、标红或写 “invalid”，元素毫无裁剪效果。即使你确认变量已定义、单位正确、逗号空格无误，也依然失败。
polygon()、circle()、path() 等函数的整个参数字符串必须在 CSS 解析时就能确定，无法等待变量计算。calc(var(--x)) 在 polygon() 内部也无效（仅 path() 中 calc() 的内部表达式可含变量）。
- 写错单位（如
100px混进百分比路径） - 顶点顺序反向
- 父容器缺失
overflow: hidden
都会加剧“看似写了却没效果”的错觉。
clip-path: path() 中用 calc() 是唯一轻量可行方案
这是目前最实用、无需 SVG、兼容性相对较好的动态路径控制方式，但边界极其清晰：
- ✅ 合法：
clip-path: path("M0,0 L100,0 L100,calc(100vh - var(--gap)) Z") - ❌ 静默失效：
clip-path: path("M0,0 L" var(--x) ",0 Z")（字符串拼接不被解析） - ❌ Safari 全面拒绝：
path()在 Safari 中始终不生效，无论是否含calc() - ⚠️ Firefox 完全忽略：
path()即使加-webkit-前缀也无效
注意：变量只能出现在 calc() 括号内，且不能参与字符串拼接；路径坐标仍需基于元素自身坐标系（0–100% 或 px），不能靠变量生成完整路径字符串。
真正可靠：用 clip-path: url(#id) 引用 SVG + transform 绑定变量
这是生产环境唯一稳定支持复杂动态裁剪的路径。核心在于把变量作用域下沉到 SVG 内部，利用 SVG 元素对 CSS 自定义属性的响应能力。
- 把
放在 HTML 底部或设为display: none，避免布局干扰 - 给
id，CSS 中用clip-path: url(#my-clip)引用 - 在
transform: translate(var(--tx), var(--ty)) scale(var(--s)) - 必须配合
transform-box: fill-box和transform-origin: center才能按图形中心缩放/位移
例如波浪边裁剪：--amp 控制。
自适应尺寸的关键其实是单位选择，不是变量本身
很多人以为“用了变量就自动适配”，其实不然。真正起作用的是路径中坐标的单位类型：
- 用
%（如M0,0 L100%,0 L100%,100% L0,100%）——路径随容器宽高缩放，最简单可靠 - 用
calc()+ 变量（如calc(100% - var(--radius))）——适合圆角、留白等局部微调 - 混用
px和%——极易导致失真，尤其在响应式场景下
变量只是让这些单位的数值可配置，它本身不解决缩放逻辑。别指望 --size: 200px 能让一个 100px 的圆自动变大——得改路径里的数字或单位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
