原生border dashed无法控制单段长度和间隙，推荐用repeating-linear-gradient实现：实色段+透明段循环，background-size控制周期，伪元素或多重背景可分别定制四边虚线。
原生 border-style: dashed 无法控制虚线单段长度和间隙，所有浏览器都按各自算法渲染，你改 border-width 或缩放页面，虚线节奏就变——这不是 bug，是规范就没定义这些参数。
用 repeating-linear-gradient 替代 border 实现横向/纵向虚线
核心思路：把虚线看作“实色段 + 透明段”的无限重复图案，用渐变生成这个单元，再靠 background-size 控制周期长度。
-
repeating-linear-gradient(to right, #333 0, #333 8px, transparent 0, transparent 12px)表示：从左到右，实线从 0 到 8px，紧接着透明从 0 到 12px（即 gap = 4px） - 总周期 = 12px，所以
background-size: 12px 1px；若要竖向虚线，把to right换成to bottom，并调换background-size的宽高值 - 必须设
height或width为 1px（取决于方向），否则渐变会被拉伸失真 - 只加在单边？用伪元素
::before或::after定位，避免影响盒模型
给四边分别设置不同间距的虚线边框
原生 border 不支持每边独立 dash/gap，background-image 多层叠加是唯一干净解法。
- CSS 支持逗号分隔多层背景：
background-image: linear-gradient(...), linear-gradient(...), ... - 上边：用
to right渐变 +background-position: top / 100% 2px - 右边：用
to bottom渐变 +background-position: right / 2px 100% - 注意顺序：后写的背景层在上层，需按“底边→右边→顶边→左边”或反序排列，避免遮挡
- 每层都要配独立的
background-size和background-repeat: repeat
border-image 方案为什么容易失效
看起来更“边框原生”，但实际踩坑密度高。
-
border-image-slice: 1必须显式写，否则渐变被裁成单色块——这是最常漏掉的一行 - 渐变方向必须匹配边框方向：上/下边框用
to right，左/右边框用to bottom，反了就出不来虚线 -
border-width必须设为非零值，且建议用transparent避免和渐变颜色打架 - 不支持 CSS 变量直接参与计算，比如
calc(var(--dash) + var(--gap))在border-image里会解析失败
真正要稳定跨浏览器、响应式缩放又可控的虚线，SVG 背景仍是首选；但日常开发中，repeating-linear-gradient 写法最轻量、调试最直观——只是别忘了，它不是边框，是背景，padding 和 box-sizing 会影响最终视觉位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
