不可行。CSS变量无法直接用于-webkit-text-stroke简写属性，因其不支持变量插值；须拆分为-webkit-text-stroke-width和-webkit-text-stroke-color两个独立属性并分别绑定变量才能动态控制。
直接用 --stroke-width 变量控制描边粗细可行吗？
不行。CSS变量不能直接注入到 -webkit-text-stroke 的声明值里，因为该属性不接受 CSS 变量作为子值（比如 -webkit-text-stroke: var(--stroke-width) black 会失效）。浏览器解析时把整个声明当作文本字面量处理，不支持变量插值。
-
-webkit-text-stroke是一个简写属性，语法为-webkit-text-stroke: <width><color></color></width>，它本身不参与 CSS 自定义属性的计算链 - 即使你定义了
:root { --stroke-width: 2px; }，也不能在简写中直接引用 - 唯一能用变量的地方是它的两个独立子属性：
-webkit-text-stroke-width和-webkit-text-stroke-color
正确做法：拆开用 -webkit-text-stroke-width + 变量
把描边宽度和颜色拆成独立属性，再分别绑定变量，才能真正实现动态调节：
:root {
--stroke-width: 2px;
--stroke-color: #000;
}
<p>.text-stroked {
-webkit-text-stroke-width: var(--stroke-width);
-webkit-text-stroke-color: var(--stroke-color);
color: transparent; /<em> 配合描边显形，可选 </em>/
}
- 这样改
--stroke-width的值（比如从2px改成4px），描边立刻变粗，无需重写选择器 - 注意：必须同时设置
color: transparent或低对比度填充色，否则描边会被文字本体盖住，看不出效果 - 如果要兼容非 WebKit 浏览器（如 Firefox），得额外用
text-shadow模拟，且它不支持变量驱动多层阴影——所以变量方案本质是 WebKit/Blink 专属
为什么不用 text-shadow 配合变量模拟描边？
text-shadow 理论上可以堆叠 8 层阴影来模拟描边，但变量无法驱动“多个阴影值”的动态生成：
-
CSS 不支持
text-shadow: var(--shadow-1), var(--shadow-2)这种写法（语法错误）立即学习“前端免费学习笔记（深入）”；
你只能定义一个完整字符串变量（如
--shadow: -1px -1px 0 #000, 1px -1px 0 #000, ...），但该变量必须是静态字符串，无法响应式增减层数或调整偏移更关键的是：这种字符串变量无法被 JS 动态修改后实时生效（浏览器不触发重绘），实测多数场景下更新无效
所以，想靠变量精细调控描边粗细，
-webkit-text-stroke-width+var()是目前唯一稳定路径若需跨浏览器，建议用 JS 拼接
text-shadow字符串并写入style，而非依赖纯 CSS 变量
容易忽略的渲染细节：描边过宽导致字体崩坏
-webkit-text-stroke-width 超过 3px 后，Chrome/Safari 会出现明显失真：
字母内腔（如
o、e）可能被描边“吃掉”，变成实心块笔画交界处糊成一团，尤其在小字号（
）下更严重这不是变量问题，而是 WebKit 渲染引擎对描边的栅格化限制
实际使用时，建议把
--stroke-width的取值范围控制在1px–3px，并配合font-size: min(4vw, 48px)做响应式缩放别指望用变量把描边拉到
6px还保持清晰——那已经超出该属性的设计边界
描边粗细的变量化控制，本质是 WebKit 内核下的权宜之计；真要自由可控，得换 Canvas 或 SVG 文本渲染。
