必须用伪元素模拟边框，因为border和outline均不支持渐变动画；::before需content:""、父元素设position:relative、伪元素用inset:0+padding控制厚度，并加pointer-events:none；mask配合box-shadow实现精准发光边框。
直接用 border 实现不了悬停发光渐变边框——CSS 的 border-color 不支持渐变，box-shadow 又无法贴合圆角或镂空形状。必须用伪元素模拟边框，再叠加发光与渐变动画。
为什么必须用 ::before 而不是 border 或 outline
因为 border 只接受单色值，写 linear-gradient() 会被浏览器完全忽略；outline 是矩形框，无法跟随 border-radius，更不能做渐变动画。伪元素是唯一能同时控制形状、渐变、位置和动画的载体。
-
::before必须设content: ""，否则不渲染 - 父元素必须有
position: relative，否则position: absolute的伪元素会脱标定位到 body 上 - 伪元素要覆盖整个卡片区域（用
inset: 0或top: 0; left: 0; width: 100%; height: 100%），再通过padding或transform: scale()控制“边框厚度” - 别忘了加
pointer-events: none，否则伪元素会拦截鼠标事件，导致:hover失效
background-image + mask 实现精准发光边框
只靠 background 渐变会把整个伪元素都染成渐变色，必须裁剪出“仅边框可见”的区域。现代方案用 mask 最可靠：
- 用
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)遮住内容区 - 配合
-webkit-mask-composite: xor（或标准写法mask-composite: exclude）让两个图层相减，只保留边框区域的渐变 - 发光效果靠第二层
box-shadow实现：比如box-shadow: 0 0 12px rgba(13, 152, 255, 0.6), 0 0 24px rgba(13, 152, 255, 0.3) - 悬停时直接改
background-image的渐变角度或颜色，并加transition: background 0.25s ease实现平滑过渡
常见错误：光条断开、圆角露白、动画卡顿
这些问题几乎都源于定位或裁剪失控：
- 圆角卡片上伪元素发光边框在拐角处断裂？→ 确保伪元素也设了
border-radius: inherit，且不要用top/left/right/bottom四方位拉伸，改用inset: 0+padding: 2px更稳 - 悬停后光效一闪就消失？→ 检查
@keyframes是否漏了infinite，或animation属性没写在:hover::before里 - Safari 里动画顿挫？→ 加
will-change: background-position（仅对高频 hover 元素），但优先检查是否用了transform替代background-position动画——后者在 Safari 中兼容性更好 - 发光溢出卡片范围？→ 父元素必须有
overflow: hidden，且伪元素不能超出其边界（inset: 0是安全起点）
真正难的不是写出来，而是让发光边缘严丝合缝贴着圆角走，且在各种尺寸、缩放、DPR 下都不露馅。这需要反复调 padding、inset 和 mask 的组合，而不是套一个通用 class 就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
