最直接方法是用box-shadow实现：设0偏移、高模糊值（如12px起）和rgba透明色，禁用border避免叠加发虚；outline仅用于可访问性焦点指示，不可替代发光效果。
用 box-shadow 实现容器发光边框最直接
HTML 本身没有“发光边框”标签，必须靠 CSS 的 box-shadow 实现。它本质是投射阴影，但设成无偏移、高模糊值时，视觉效果就是均匀发光。关键不是加 border，而是绕过 border 用阴影“模拟光晕”。
常见错误是写成 border: 2px solid #0af; box-shadow: 0 0 10px #0af; —— 这会导致边框和光晕叠加，边缘发虚或颜色不纯。真正干净的发光，应该先清空 border（或保持透明），全靠 shadow 控制光。
-
box-shadow: 0 0 12px #00aaff;：基础内敛发光，适合按钮、卡片 -
box-shadow: 0 0 20px 4px rgba(0, 170, 255, 0.6);：加了 spread 距离，光更饱满，边缘更实 - 若要外扩明显（如警示框），可加正向偏移：
box-shadow: 0 0 25px 8px #ff6b6b;
发光颜色和透明度比想象中更敏感
纯色发光（如 #ff0000）容易刺眼或像 bug；实际项目中几乎都用 rgba() 控制透明度。不设 alpha 值，浏览器会默认不透明，导致光晕过重、遮盖背景细节。
比如深色背景上用蓝色发光：box-shadow: 0 0 15px rgba(0, 170, 255, 0.7); 比 0 0 15px #00aaff 更柔和、更易融入设计。浅色背景则建议把 alpha 降到 0.4–0.5，否则显得脏。
- 避免用
hsl()或命名色（如blue），它们在不同浏览器下渲染差异大 - 移动端要注意：过高模糊值（>30px）可能触发强制 GPU 渲染，造成低端机卡顿
- 如果发光要响应交互，别只写
:hover，记得补上transition: box-shadow 0.2s ease;
别用 outline 代替 box-shadow
有人试过 outline: 3px solid #0af; outline-offset: 5px;，看起来像发光，但这是严重误区：outline 不占布局空间、无法圆角、不支持模糊、键盘聚焦时行为不可控，且在部分屏幕阅读器中会干扰可访问性。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
真实场景中，outline 只该用于焦点指示（accessibility），而发光是视觉装饰，语义和实现都不同。强行混用会导致审查工具报错（如 axe 提示 “outline not used for focus visibility”）。
-
outline不能设置border-radius，遇到圆角容器会露馅 - 它不随 transform 缩放，动画中容易错位
- Firefox 对
outline-style: auto渲染异常，慎用
需要兼容 IE？基本没得选
IE10+ 支持 box-shadow，但只接受 RGB 十六进制（不支持 rgba）、无 spread 参数、模糊半径上限约 10px。也就是说，IE 下的“发光”只能是浅淡、低饱和、无层次的轮廓光。
如果你的项目仍需支持 IE，要么降级为单层阴影（box-shadow: 0 0 8px #00aaff;），要么用 SVG 滤镜（复杂且性能差），或者干脆放弃 IE 发光效果——多数业务已不值得为它增加 hack 成本。
真正容易被忽略的是：发光效果在高对比度模式（Windows HC mode）下会被系统强制抹除。如果容器承载重要信息，别只依赖发光传达状态，务必配合图标、文字或 aria-label。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
