不能。CSS自定义属性无法直接用于-webkit-text-stroke，因该属性不支持var()注入，Safari静默忽略、Chrome行为不稳定；可靠替代方案是用text-shadow配合calc()和var()模拟描边。
自定义属性能直接传给 -webkit-text-stroke 吗？
不能。CSS 自定义属性（--stroke-width、--stroke-color）无法直接作为 -webkit-text-stroke 的值使用，因为该属性不接受 CSS 变量注入——Safari 部分版本会静默忽略，Chrome 虽然某些版本能解析，但行为不稳定，属于未定义行为。
常见错误现象：-webkit-text-stroke: var(--stroke-width) var(--stroke-color); 在 Safari 17.5+ 中可能失效，文字完全无描边；Chrome 124+ 偶尔生效，但升级后容易回退。
- 必须展开写死：比如
-webkit-text-stroke: 2px #333;，不能靠变量动态替换 - 如果真要用变量控制，得靠构建时处理（如 PostCSS、SCSS 编译）或 JS 注入 style 标签
- 别在 :root 里定义
--text-stroke: 2px #333然后试图-webkit-text-stroke: var(--text-stroke)——这行不通
想用变量切换描边，实际可行的替代路径
真正能跑通的方案是绕开 -webkit-text-stroke 的变量限制，改用 text-shadow 模拟，并让变量参与计算。
text-shadow 支持 var()，且所有现代浏览器都认。例如：
立即学习“前端免费学习笔记（深入）”；
.title {
--stroke-width: 1.5;
--stroke-color: #2173FF;
color: white;
text-shadow:
calc(var(--stroke-width) * -1) calc(var(--stroke-width) * -1) 0 var(--stroke-color),
calc(var(--stroke-width) * 1) calc(var(--stroke-width) * -1) 0 var(--stroke-color),
calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 1) 0 var(--stroke-color),
calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 1) 0 var(--stroke-color);
}- 只支持方形“硬边”描边，不是轮廓贴合，但变量可控
- 描边宽度超过
2px时，calc()偏移易出现像素对齐错位，建议限在1px–2px区间 - Firefox、Safari、Chrome 全兼容，不用加前缀
为什么不能用 outline 或 border 替代？
因为它们作用对象是盒模型，不是文本字形本身。
-
outline绕整个 inline 元素外框，无法贴合字母曲线，圆角字母（如O、S）边缘留白明显 -
border更糟：它需要块级容器撑开，且描边与文字之间有不可控间距 - 两者都无法实现“空心字”（
color: transparent+ 描边），一设transparent就看不见了
复杂点常被忽略：描边层级和可访问性
-webkit-text-stroke 渲染顺序固定：描边画在文字填充色之上、text-shadow 之下。这意味着如果你同时用了 color: #fff、-webkit-text-stroke: 2px #000 和 text-shadow: 2px 2px 2px rgba(0,0,0,0.3)，阴影会被描边盖住一部分，视觉上变淡——这不是 bug，是规范定义的绘制栈。
更隐蔽的问题是：用伪元素双层文字模拟外描边（如 [data-content]::before）会破坏屏幕阅读器对文本的朗读逻辑，除非显式加 aria-hidden="true" 并确保主文本可读。而 SVG 方案虽精准，但需额外包裹结构，<text> 不继承父级字体设置，每个实例都得重设 font-family、font-size。
