直接用box-shadow+@keyframes配合:hover实现，禁用border动画、覆盖overflow:visible和border-radius，加prefers-reduced-motion兼容性处理。
Card悬停时边框跑马灯用什么CSS属性实现
直接用 box-shadow + @keyframes 配合 :hover 就能搞定，不需要JS，也不依赖Bootstrap内置类。Bootstrap的 .card 本身不提供跑马灯效果，得自己加样式——关键是别动它的 border，否则容易和 .card-border 冲突或被 border-radius 截断。
为什么不能直接动画 border-color
直接对 border-color 做渐变动画会卡顿，且无法形成“流动”感；更严重的是，Chrome 和 Safari 对 border 的多色渐变支持极差，border-image 在圆角卡片上还会在拐角处撕裂。实际测试中，90% 的“跑马灯失败”都源于硬套 border 动画。
- ✅ 正确做法：用
box-shadow模拟发光边框，配合inset或偏移值制造位移错觉 - ⚠️ 注意：必须设置
overflow: hidden在.card上，否则阴影溢出破坏圆角视觉 - ? 示例关键帧：
@keyframes border-glow { 0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); } }
如何兼容Bootstrap 5.x的card结构
Bootstrap 5 默认给 .card 加了 border-radius: 0.25rem 和 overflow: visible，这两项必须覆盖。否则跑马灯会在圆角处“断掉”，或者阴影从卡片顶部/底部漏出。
- 强制加
overflow: hidden到.card或自定义 class（如.card-glow） - 避免用
!important覆盖border，改用border: none并把视觉焦点全交给box-shadow - 响应式下慎用固定
10px宽度的光晕，建议用calc(1px * 2)或视口单位保持比例 - 移动端 hover 不触发，需额外加
focus-within或点击态支持（例如加tabindex="0"）
性能与可访问性容易被忽略的点
跑马灯动画如果用 animation-timing-function: linear 循环不停，会持续触发重绘，低端设备明显掉帧；同时对屏幕阅读器用户毫无意义，还可能干扰焦点流。
- 加
prefers-reduced-motion: reduce查询，自动禁用动画：@media (prefers-reduced-motion: reduce) { .card-glow:hover { animation: none; } } - 别用
infinite，改成1s ease-out forwards，悬停一次只播一遍，更省资源 - 如果卡片含链接或按钮，确保
:focus样式也同步有光效，否则键盘用户看不到反馈
真正让跑马灯“活起来”的不是动画有多炫，而是它不抢焦点、不卡渲染、不破坏圆角、不忽略残障用户——这些细节没处理好，再 flashy 的效果也只是半成品。
