原生 border-style: dashed 无法用 CSS 变量控制虚线长度和间距，因其为浏览器黑盒渲染；需改用 repeating-linear-gradient 背景方案，通过 --dash、--gap 变量配合 background-size 和 background-origin 实现真正可控虚线。
原生 border-style: dashed 无法用 CSS 自定义属性（--gap、--dash）动态控制虚线长度和间距，必须换用 repeating-linear-gradient 或 border-image 方案。
为什么不能直接用 CSS 变量控制 dashed
CSS 原生的 border-style: dashed 是一个黑盒渲染行为，浏览器按内部算法生成线段与间隙，不暴露任何可被 var(--x) 替换的参数。即使你写成 border: calc(var(--w) * 1px) dashed #000，也只影响粗细，不影响虚线密度 —— Chrome 还是 3:1，Firefox 还是 5:3。
repeating-linear-gradient + CSS 变量实现真正可控虚线
这是目前最通用、兼容性好（IE10+）、且完全支持 CSS 变量的方案。关键在于把虚线“画”在背景上，并用 background-size 配合变量缩放单位。
使用要点：
- 用
repeating-linear-gradient定义单个周期：实线段 + 透明间隙 - 将周期总长设为
calc(var(--dash) + var(--gap))，再通过background-size控制重复粒度 - 必须设置
background-origin: border-box，否则虚线可能被padding或内容遮挡 - 若元素有圆角，需额外加
background-clip: padding-box避免虚线溢出圆角外
示例：
.dynamic-dashed {
--dash: 8px;
--gap: 6px;
width: 200px;
height: 100px;
border: none;
background: repeating-linear-gradient(
to right,
#000,
#000 var(--dash),
transparent var(--dash),
transparent calc(var(--dash) + var(--gap))
);
background-size: calc(var(--dash) + var(--gap)) 2px;
background-repeat: repeat-x;
background-origin: border-box;
background-clip: padding-box;
}
border-image 方案的变量适配陷阱
虽然 border-image 理论上更“像边框”，但它的渐变源（linear-gradient）本身**不支持 CSS 变量插值** —— 你不能在 linear-gradient(to right, #000 var(--dash), transparent var(--dash)) 中直接用变量，浏览器会忽略该颜色停靠点。
可行解法只有两种：
- 用 JS 动态生成
style标签或内联border-image值（适合运行时频繁切换） - 预定义多组类名，如
.dash-4-2、.dash-6-8，配合 :root 中的变量做批量生成（适合构建时确定范围）
硬要纯 CSS 实现，必须放弃 border-image 的变量直用，转而用 repeating-linear-gradient 背景方案。
真正要注意的是：所有基于背景的虚线都依赖 background-origin 和 background-clip 的组合。漏掉其中任何一个，在有 padding、border-radius 或 box-shadow 的场景下，虚线就容易错位、截断或被裁掉 —— 这比变量写法本身更容易出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
