-webkit-text-stroke 不支持 var()，因规范限制其为原子级声明，无法解析CSS变量；可行方案是构建时编译替换或JS直接设置style.webkitTextStroke，或用支持var()的text-shadow模拟描边。
-webkit-text-stroke 不支持 var()，所有试图用 CSS 自定义属性直接赋值的写法都会失效。 Safari 会静默忽略，Chrome 行为不稳定，Firefox 根本不认——这不是兼容性问题，而是规范层面的限制。
为什么 var(--stroke-width) 在 -webkit-text-stroke 里不生效
CSS 自定义属性只能在计算值阶段被解析，而 -webkit-text-stroke 是一个“原子级”声明，浏览器不把它拆解成 width/color 两部分去分别代入变量。它要么整条解析成功，要么整条丢弃。
-
-webkit-text-stroke: var(--w) var(--c);→ Safari 17.5+ 直接跳过，文字无描边；Chrome 124+ 偶尔能渲染，但升级后大概率回退 -
--text-stroke: 2px #333;然后-webkit-text-stroke: var(--text-stroke);→ 所有浏览器都忽略，因为var()不能展开为多值 - 即使只换颜色：
-webkit-text-stroke: 2px var(--color);→ 同样无效，width 和 color 必须同时写死
真正能动态控制描边的两种可行路径
绕开 -webkit-text-stroke 的变量限制，只有两个落地方式：构建时注入，或运行时 JS 注入 style。
- PostCSS/SCSS 编译时替换：定义
$stroke-width: 2px;和$stroke-color: #333;，生成-webkit-text-stroke: 2px #333;—— 变量只存在于源码，最终 CSS 里没有var() - JS 动态写入：用
document.documentElement.style.setProperty('--stroke-color', '#ff6b6b');配合预设的 CSS 规则（如[data-stroke="primary"] { -webkit-text-stroke: 2px var(--stroke-color); }），但注意：这仍依赖浏览器是否支持该组合，实际不可靠 - 更稳妥的做法是 JS 直接操作
element.style.webkitTextStroke = '2px ' + color，绕过 CSS 变量解析链
用 text-shadow 模拟描边并真正支持 var()
text-shadow 是唯一原生支持 var() 且全浏览器一致的描边替代方案。虽然不是“真描边”，但可控、可动画、可响应式。
立即学习“前端免费学习笔记（深入）”；
- 基础模拟单像素描边：
text-shadow: 1px 0 0 var(--shadow-color), -1px 0 0 var(--shadow-color), 0 1px 0 var(--shadow-color), 0 -1px 0 var(--shadow-color); - 配合
calc()控制宽度：--stroke-width: 2;→text-shadow: calc(var(--stroke-width) * 1px) 0 0 var(--shadow-color), ... - 缺点：斜体或细字体下可能露白边；无法实现描边圆角；4 方向阴影叠加在高密度文本中略增渲染压力
最常被忽略的一点：所谓“动态控制描边”，本质不是让 -webkit-text-stroke 接受变量，而是选择哪条技术路径承担动态性——CSS 变量只适合 text-shadow 或构建时处理，千万别卡在 var() + -webkit-text-stroke 这个死结里反复试错。
