原生 border-style: dashed 无法动画，需用 background-image + linear-gradient 模拟边框并 animating background-position 实现虚线滚动；因浏览器对 dashed 边框采用静态查表渲染，不支持插值动画。
原生 border-style: dashed 无法动画，所谓“虚线流动”必须绕过它——用 background-image + linear-gradient 模拟边框，再通过 background-position 位移实现滚动感。
为什么 border: dashed 不能直接加动画
浏览器对 border-style: dashed 的渲染是静态查表行为，不参与 CSS 动画插值。改 border-color 或 border-width 都不会让虚线“动起来”，只会整体变色或变粗。
常见错误现象：@keyframes 里试图改变 border-color，结果只是颜色闪烁，虚线节拍、间距、起始位置全无变化。
-
stroke-dasharray和stroke-dashoffset只对 SVG 元素有效，对普通div的border无效 - 哪怕用
CSS 变量控制border-width，也无法影响虚线的 dash/gap 比例 - IE/Edge 旧版本不支持
border-image渐变，但现代项目基本可忽略（2026 年主流已弃用 IE）
用 background-image 模拟单边虚线滚动
核心思路：把一条边（比如上边框）用 background 替代，用重复线性渐变生成虚线段，再横向移动背景图位置制造“滚动”错觉。
立即学习“前端免费学习笔记（深入）”；
示例（上边框虚线滚动）：
div {
--dash: 6;
--gap: 4;
height: 100px;
border-top: 2px solid transparent;
background-image:
linear-gradient(to right, #333 0, #333 var(--dash), transparent 0, transparent calc(var(--dash) + var(--gap)));
background-size: calc(var(--dash) + var(--gap)) 2px;
background-position: 0 0;
background-repeat: repeat-x;
animation: scroll-top 2s linear infinite;
}
@keyframes scroll-top {
to { background-position: calc(var(--dash) + var(--gap)) 0; }
}
- 必须设
border-top: 2px solid transparent占位，否则background会从 content-box 开始画，视觉偏下 -
background-size要等于一个完整虚线单元（--dash + --gap），否则滚动会跳帧 - 动画终点
background-position必须等于background-size的 x 值，才能无缝循环
四边同时滚动的兼容写法
给四边都配独立的 background-image，并分别控制方向与位移，避免用伪元素导致层叠或响应式错位。
关键点：
- 上边：
to right+background-position-x动画 - 右边：
to bottom+background-position-y动画，且加animation-delay: 0.5s错开节奏 - 下边：
to left（或仍用to right但初始background-position-x设为负值） - 左边：
to top+background-position-y动画，animation-delay: 1s - 所有边的
background-clip必须是border-box，否则只在 padding 内显示
容易踩的坑：四个 background-image 写在同一行时，逗号分隔易漏；background-size 必须一一对应每个渐变，不能共用一个值。
滚动节奏和性能注意点
滚动太快会眩晕，太慢显呆滞。建议周期控制在 1.5–3 秒之间；用 will-change: background-position 提升动画层，避免重排。
更隐蔽的问题：
- 如果容器宽高不是整数像素，
background-position小数位可能引发 subpixel 渲染模糊，尤其在 Retina 屏上 - 用
repeating-linear-gradient代替多个linear-gradient更简洁，但 Safari 旧版对多层repeating支持不稳定 - 滚动动画在页面非激活标签页中会被浏览器节流，
visibility: hidden或display: none会直接暂停动画
真正要上线，别只测 Chrome —— Firefox 对 background-position 动画的插值精度略低，Safari 则对多背景叠加的 animation 有偶发卡顿，得实机验证。
