用 box-shadow 实现发光边框无需 JS 或框架，需控制发光强度、颜色过渡与性能：必须用 box-shadow（非 outline/border），推荐多层叠加、冷灰调蓝（如 hsl(200,100%,60%)）、禁用 inset，动画周期≥2.5s 且仅动 blur 和 opacity，并适配高 DPI 与无障碍。
直接用 box-shadow 配合 animation 就能实现，不需要 JS，也不必套用复杂框架——但发光强度、颜色过渡和性能表现，全取决于你如何控制这三者的关系。
发光边框必须用 box-shadow，别碰 outline 或 border
outline 无法做渐变或模糊，border 本身不发光；只有 box-shadow 支持多层叠加、透明度控制和高斯模糊模拟。一个基础发光卡片的最小可行写法是：
card {
box-shadow: 0 0 12px rgba(0, 150, 255, 0.6);
}- 第二层（可选）加个更宽更淡的阴影：比如
0 0 32px rgba(0, 120, 220, 0.2)，增强“光晕”纵深感 - 避免用纯白或纯蓝发光，人眼对
hsl(200, 100%, 60%)这类带冷灰调的蓝更敏感，也更显科技感 - 别给
box-shadow加inset——它会让光“缩进”卡片里，失去外溢的真实感
动画要控制频率和位移，否则会闪瞎眼
高频闪烁（如 200ms 周期）或大范围明暗跳变（如 opacity 从 0 到 1）会导致视觉疲劳，甚至触发光敏反应。推荐做法：
- 用
animation: pulse 3s ease-in-out infinite，周期 ≥ 2.5s，缓动用ease-in-out而非linear - 只动画
box-shadow的blur和opacity，例如：0 0 calc(8px + 4px * sin(1.5t)) rgba(0, 140, 230, 0.4 + 0.2 * cos(t))（实际 CSS 中需拆为关键帧） - 在
@media (prefers-reduced-motion: reduce)下直接禁用动画，加一句animation: none
移动端和高 DPI 屏幕要注意模糊半径缩放
box-shadow 的像素值在 Retina 屏上会被物理像素放大，导致发光过重；在低端 Android 上又可能因渲染限制直接丢失第二层阴影。应对策略：
立即学习“前端免费学习笔记（深入）”；
- 用
rem或em替代px控制模糊半径，例如box-shadow: 0 0 1.2rem rgba(...) - 对 iOS Safari 加一条
-webkit-backface-visibility: hidden，防止阴影层被裁剪 - 测试时真机连 Chrome DevTools 的 “Rendering → Emulate CSS media feature” 功能，切到
prefers-contrast: high看是否还能辨清文字
真正难的不是让边框亮起来，而是让它亮得有分寸——太强像警灯，太弱像快没电的 LED；动画节奏稍快一点，用户就会下意识躲开那个区域。动手前先在灰底色上预览 3 秒，眼睛不发酸，才算合格。
