边框滚动条纹是通过虚线边框+stroke-dasharray与stroke-dashoffset动画或border-image实现的光带循环效果，非overflow滚动条；SVG方案更稳定，需精确计算路径长度并设stroke-linecap: round防卡顿。
边框滚动条纹 ≠ 滚动条，别用 overflow
“边框滚动条纹”不是给按钮加滚动条（overflow: scroll），而是让按钮的边框看起来像有光带或虚线在循环移动。常见错误是搜“滚动条”后误套用 overflow 或 scrollbar 相关属性——这些对边框完全无效，还可能破坏布局。
真正起作用的是三要素：虚线边框 + stroke-dasharray + stroke-dashoffset 动画，或 CSS 的 border-image + animation 配合位移。SVG 方案更稳定，尤其适配高缩放和 Retina 屏。
- 纯 CSS 方案依赖
border-style: dashed，但 dash 间距无法精确控制，不同浏览器渲染差异大，移动端易失步 - SVG 方案把边框抽离为
<rect>元素，用stroke-dasharray定义“实段+空隙”长度，再用stroke-dashoffset平滑位移，动画节奏可控 - 必须设
stroke-linecap: round，否则虚线端点是直角，滚动时出现明显“卡顿接缝”
stroke-dasharray 和 stroke-dashoffset 怎么配才不卡
这两个值不是随便填数字。比如 stroke-dasharray: 120 1312 表示“画 120px 实线，留 1312px 空隙”，总周长 ≈ 1432px；而 stroke-dashoffset 就是从这个环上某点开始“截取显示”的偏移量。
动画要流畅，必须满足：dasharray 总和 ≈ 边框路径总长度 × 1.05～1.2（预留余量防首尾断开）。直接抄网上的固定值（如 100 100）在圆角按钮或非正方形容器里大概率出现“光带跳变”或“中途消失”。
立即学习“前端免费学习笔记（深入）”；
- 计算路径长度：矩形按钮用
2×(width + height)；带border-radius的需按 SVG<rect>的rx/ry自动拟合，建议用 DevTools 测量实际渲染后的<rect>周长 -
stroke-dashoffset动画起点设为0，终点设为-总长度（负向位移才能连续滚动） - 动画时长别设太短（
1s），否则高速滚动易晕；也别太长（>4s），用户悬停时间短，动画还没跑完就重置了
背景动画和边框滚动能共存吗？冲突点在哪
能共存，但顺序和层级极易出错。典型问题：背景渐变动画一动，边框滚动就停顿、闪烁，甚至整个按钮重绘卡顿。
根本原因是两者都依赖 background-position 或 transform 触发重绘，而浏览器对复合动画的合成策略不同。解决方案不是“堆 transition”，而是拆层：
- 边框滚动用 SVG 或伪元素（
::before）单独图层，z-index设为 1，pointer-events: none - 背景动画走主元素的
background-position，但必须加will-change: background-position（仅 hover 时启用，避免常驻消耗） - 禁用
transition: all—— 它会把边框滚动的stroke-dashoffset变化也纳入过渡，反而拖慢帧率 - 如果按钮有
border-radius，背景动画边缘容易露底色，此时要在主元素加overflow: hidden，但 SVG 边框层必须overflow: visible，否则圆角处光带被裁掉
移动端 touch 下边框滚动失效？检查这三项
PC 上跑得好好的动画，手机点一下就卡住或不动，大概率不是代码问题，而是交互层拦截。
-
touch-action: manipulation必须加在按钮上，否则 iOS Safari 会禁用部分 CSS 动画触发时机 - 别依赖
:hover单独驱动滚动动画 —— 移动端没有持续 hover 状态。改用:active+animation-play-state: paused/running控制启停，或加 JS 监听touchstart/touchend切换 class - 某些安卓 WebView 对
stroke-dashoffset动画支持弱，降级方案：用@keyframes改transform: translateX()模拟滚动，配合background: linear-gradient绘制窄条纹作为“滚动带”，放在伪元素里
最麻烦的其实是圆角 + 滚动 + 渐变背景三者叠加时的像素对齐问题——差 0.5px 就可能让光带在角落“断开一帧”。这种细节没工具能自动修复，只能靠真机反复调 border-radius 和 stroke-width 的组合值。
