outline不是外发光，它仅为可访问性设计，不支持圆角、模糊、分方向设置；真正外发光必须用box-shadow多层叠加实现。
outline 不能实现真正的“外发光”效果，它只是在元素边界外绘制一条**等宽、无圆角、不占布局空间**的轮廓线，视觉上最多是“单色高亮边框”，和 box-shadow 的模糊发光有本质区别。
为什么 outline 不是外发光
outline 是为可访问性设计的聚焦提示（如键盘 Tab 导航时的焦点环），它的行为受浏览器严格控制：
- 无法设置
border-radius圆角，始终紧贴元素矩形边界 - 不支持
blur模糊半径，所有浏览器都只渲染硬边线条 - 不能分方向设置（如只上/下 outline），也不支持 inset
- 在部分浏览器（如 Chrome）中，
outline-offset超过一定值会被截断或忽略
用 box-shadow 模拟外发光才是正解
真正可控的“外发光”必须用 box-shadow，通过多层阴影叠加 + 模糊半径 + 扩展距离实现渐变光晕效果：
button {
background: #4a6fa5;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
/* 外发光：内层清晰、外层模糊 */
box-shadow:
0 0 0 2px rgba(74, 111, 165, 0.3),
0 0 8px 4px rgba(74, 111, 165, 0.4),
0 0 16px 8px rgba(74, 111, 165, 0.2);
}关键参数说明：
立即学习“前端免费学习笔记（深入）”；
-
0 0：水平/垂直偏移为 0 → 光晕居中扩散 -
8px：模糊半径 → 数值越大越“虚”，是发光感来源 -
4px：扩展半径 → 控制光晕向外“膨胀”的厚度 -
rgba()中 alpha 值要低（0.2–0.4），避免遮盖内容
如果非要 hack outline 实现“类发光”视觉
仅限极简场景（如纯色背景上的图标按钮），可通过组合 outline + outline-offset + 半透明色模拟轻微外扩高亮，但效果僵硬且不可控：
icon-button {
outline: 2px solid rgba(255, 255, 255, 0.6);
outline-offset: 4px;
/* 注意：Firefox 下 outline-offset 负值可能失效，Chrome 对 offset > 10px 渲染不稳定 */
}风险点：
- 无法响应鼠标悬停动态增强发光强度
- 深色背景上白色 outline 显得刺眼，无自动反色逻辑
- 与
focus状态冲突，可能覆盖原生焦点样式
真正需要外发光，就别碰 outline —— 它不是为此而生；box-shadow 的三层叠加写法虽略冗长，但可控、可动画、可适配暗色模式，才是生产环境唯一靠谱路径。
