hover边框流光用::before是因为border不支持渐变动画，而伪元素可定位、设背景渐变并配合background-position实现平滑流动效果，且需父元素设position:relative和overflow:hidden。
hover 边框流光效果为什么用 ::before 而不是直接改 border
因为纯 CSS 的 border 不支持渐变色动画，更没法让“光”沿着边框跑起来。真正能动的是伪元素——它可定位、可设宽高、可加 background: linear-gradient，再配合 transform: translateX 或 background-position 就能模拟流动感。
常见错误是给父元素加 overflow: hidden 却忘了设 position: relative，导致伪元素脱标飞走；或者用 border: 2px solid 后又叠一层伪元素边框，视觉上变粗还错位。
- 必须给触发 hover 的元素设
position: relative - 伪元素用
content: ""+position: absolute贴边绘制 - 流光本质是背景图位移：
background-size: 200% 200%配合background-position: -100% 0初始偏移 - 动画用
background-position比transform更稳，避免重绘抖动
background-position 动画卡顿或不循环？检查这几点
很多人写完发现光条只闪一下就停，或者在 Chrome 里顺滑、Safari 里顿挫。核心问题出在动画定义和渲染层触发上。
典型错误：用 animation: shine 2s 但没写 infinite；或用了 ease-in-out 导致中间速度不均，看不出“流”感；还有人把 background-image 写成单色渐变，根本没方向性。
- 动画必须带
infinite和linear：例如animation: shine 2.5s linear infinite - 渐变至少要两个色标，且方向明确：
linear-gradient(45deg, transparent, #fff, transparent) - 为防 Safari 兼容问题，加
-webkit-background-clip: text无用，这里不需要；真正要加的是will-change: background-position（慎用，仅对高频 hover 元素） - 如果按钮尺寸小（比如
width: 40px），把background-size调到300% 300%再试，避免光条太短看不出流动
适配不同形状容器：圆角、圆形、不规则边框怎么处理
矩形盒子好办，一贴四边就行；但遇到 border-radius: 8px 或 border-radius: 50%，伪元素直角边框会露馅——光条在圆角处断开、错位、甚至溢出。
解决思路不是“修边”，而是让伪元素也跟着圆：用 border-radius 继承父级，并控制伪元素的 inset 值微调位置。圆形按钮则需额外注意宽高比和伪元素中心对齐。
- 父元素有
border-radius，伪元素必须同步设置相同值 - 不要用
top: 0; left: 0; right: 0; bottom: 0四方位拉伸，改用inset: 0（兼容性稍差但语义清晰），或老式写法top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px)补偿边框厚度 - 圆形按钮（
border-radius: 50%）需确保宽高相等，伪元素也设border-radius: 50%，否则光效变形 - 不规则形状（如
clip-path）无法靠伪元素模拟流光，此时应换 SVG mask 或放弃纯 CSS 方案
移动端 touch 设备下 hover 失效或响应延迟
iPhone 和部分安卓机默认不触发 :hover，尤其在非标签或未启用 cursor: pointer 的元素上。这不是 bug，是浏览器策略：避免误触、省电、减少重绘。
强行 hack（比如监听 touchstart 加 class）会破坏体验，也不该由 CSS 层解决。合理做法是降级：保留基础边框变化，把流光作为增强效果，仅对 hover + pointer: fine 的设备启用。
- 用媒体查询隔离：
@media (hover: hover) and (pointer: fine)包裹流光动画代码 - 移动端保留简单效果：比如
border-color: #007bff或轻微box-shadow - 别在伪元素上加
pointer-events: none—— 它本就不捕获事件，加了反而可能干扰点击穿透 - 真要兼容 touch，得 JS 配合：监听
touchstart添加临时 class，但动画时间要控制在 300ms 内，否则用户松手后光还在跑
流光效果真正的复杂点不在怎么写，而在什么时候不该写：按钮太小、文字太密、背景太花时，光效反而抢注意力，甚至影响可访问性。别为了炫而加，先问一句——用户需要知道这个按钮被悬停了吗？需要多强的反馈？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
