stroke-dasharray 动态生效的前提是：svg 场景中需用 css 变量预设完整字符串值（如 --dash-spec: "6 3"）并确保数组项数一致；普通元素边框则必须用 border-image + linear-gradient 模拟，因原生 dashed 不支持变量动画。
stroke-dasharray 动态生效的前提是什么
它只对 SVG 元素（比如 <rect></rect>、<path></path>、<circle></circle>）或 CSS 的 border（需配合 border-style: dashed）起作用，但注意：stroke-dasharray 本身是 SVG 属性，不能直接写在普通 HTML 元素的 CSS 里控制 border 虚线——那是 border-style 和 border-width 的事。
所以想用 CSS 变量驱动虚线间隔，得明确场景：
- 如果是 SVG：直接在内联样式或 CSS 中用
stroke-dasharray: var(--dash, 4 2) - 如果是普通元素边框：得靠
border-image+linear-gradient模拟，再把渐变参数用 CSS 变量控制
用 CSS 变量控制 border-image 虚线（兼容现代浏览器）
这是目前最实用、可动画、可响应式的方式。原理是用带透明/色块交替的线性渐变作为边框贴图，再用变量调节色块宽度和间距。
常见错误现象：border-style: dashed 完全不响应 CSS 变量，改 border-width 或 border-color 也无济于事——因为原生虚线是渲染引擎硬编码的，无法动态插值。
实操建议：
- 用
border-image替代原生border-style - 渐变方向必须和边框方向一致（上/下边框用
to right，左/右边框用to bottom） - 每个“虚线段”由两段组成：实线（颜色）+ 透明间隙，总长 =
var(--dash, 6)+var(--gap, 4) - 确保
border-image-slice: 1，否则渐变会被裁切失效
示例（上边框）：
div {
--dash: 8;
--gap: 6;
border-top: 6px solid transparent;
border-image: linear-gradient(
to right,
#333 0, #333 var(--dash),
transparent 0, transparent calc(var(--dash) + var(--gap))
) 1;
}
SVG 中用 CSS 变量驱动 stroke-dasharray
这个最直接，但仅限 SVG 场景。关键点在于：CSS 变量必须定义在能被 SVG 元素继承或显式引用的作用域里（比如 :root 或父容器），且 SVG 元素得用内联样式或 class 绑定。
容易踩的坑：
-
stroke-dasharray值是空格分隔的数字，不能写成var(--dash) var(--gap)—— 浏览器不解析多个var()在一个属性里 - 正确写法是预设组合值：
--dash-spec: "4 2"，然后stroke-dasharray: var(--dash-spec)（注意引号仅用于 CSS 自定义属性定义，实际值不含引号） - 动画时，
stroke-dasharray支持 CSS 过渡，但必须保证两个状态的数组项数一致（如都为两项），否则会跳变
示例（SVG 矩形）：
:root { --dash-spec: 6 3; }
rect { stroke-dasharray: var(--dash-spec); transition: stroke-dasharray 0.3s; }
rect:hover { --dash-spec: 12 4; }
为什么 border-image 方案比 canvas 或 JS 控制更稳
Canvas 绘制边框要监听 resize、处理 DPR、手动计算坐标；JS 修改 style 属性易触发重排；而 border-image + 渐变是纯声明式，CSS 变量更新自动重绘，GPU 加速友好，且支持 :hover/:focus 等伪类响应。
但要注意兼容性底线：IE 完全不支持 border-image，iOS Safari 12.2+ 才稳定支持变量在 linear-gradient 中使用。如果项目需兼容 iOS 11 或 Android 4.4，就得降级为固定值或 JS 注入 style 标签。
真正复杂的地方不在写法，而在设计边界：比如当 --dash 小于 1px 或总周期小于 border-width 时，视觉会糊成实线——这时候需要 JS 校验或 CSS @media (min-resolution) 分层控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
