css 中 border: dashed 无法直接动画，因浏览器对 border-style 渲染为静态查表、不支持插值；需用 background-image + linear-gradient 模拟虚线滚动效果，并通过 background-position 实现位移动画。
border: dashed 不能直接加动画，这是根本限制
浏览器对 border-style: dashed 的渲染是静态查表行为，不参与 CSS 动画插值。你写 @keyframes 改 border-color 或 border-width，只会整体变色或变粗，虚线节拍、间距、起始位置全无变化。常见错误现象：动画里只闪一下颜色，或者完全不动——尤其在 Safari 和旧版 Firefox 上更明显。
别试 stroke-dasharray 和 stroke-dashoffset，它们只对 SVG 元素（<path></path>、<rect></rect>）有效，对普通 <button></button> 的 border 毫无作用。
用 background-image + linear-gradient 模拟单边滚动最稳
核心思路：放弃 border，用 background-image 在对应边缘画一条“假边框”，再靠 background-position 位移制造滚动感。以下以按钮上边框为例：
button {
--dash: 6;
--gap: 4;
border-top: 2px solid transparent; /* 占位，否则背景从 content-box 开始画 */
background-image: linear-gradient(to right, #333 0, #333 calc(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;
}
<p>@keyframes scroll-top {
to { background-position: calc(var(--dash) + var(--gap)) 0; }
}</p>
-
background-size必须等于一个完整虚线单元（--dash + --gap），否则滚动会跳帧 -
border-top: 2px solid transparent不可省，否则视觉位置下移 - 动画终点的
background-position必须等于background-size的 x 值，才能无缝循环
四边同时滚动要分层控制方向与延迟
给四边各配一套 background-image，避免伪元素导致层叠错乱或响应式偏移：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 上边：
linear-gradient(to right, ...)+background-position-x动画 - 右边：
linear-gradient(to bottom, ...)+background-position-y动画，加animation-delay: 0.5s错开节奏 - 下边：
linear-gradient(to right, ...)+background-position-x反向动画（或翻转渐变方向） - 左边：
linear-gradient(to bottom, ...)+background-position-y反向动画
所有层必须设 background-clip: padding-box，否则背景可能盖住文字；background-size 建议设为远大于按钮尺寸（如 200% 4px），防止位移过程露白。
hover 时暂停动画得用 animation-play-state
用户交互时停掉流动更友好，但不能只写 :hover { animation-play-state: paused; } 就完事——如果初始没声明动画，hover 时再加会闪一下。必须初始化就带动画：
- 基础样式里写全
animation: scroll-top 2s linear infinite; -
:hover中只覆盖animation-play-state: paused; - 绝对不要用
animation: none，会导致重绘和抖动
真正容易被忽略的是：小尺寸按钮（比如高 40px）用环形方案（如 conic-gradient）时，虚线会断续、边缘留白——这不是代码错，是视觉密度压缩导致的失配，得用 transform: scale(1.2) 主动补偿，且必须和 rotate() 合并在同一个 transform 声明里，否则触发重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
