夜光按钮用box-shadow实现三层发光边框，参数为0 0 8px #00f、0 0 16px #00f、0 0 24px #008，配合深蓝紫背景#0a0a1a和禁用filter提亮，确保真机oled屏下辉光自然不刺眼。
发光边框用 box-shadow 实现，不是 text-shadow 或 outline
夜光按钮的核心是模拟“自发光”效果，box-shadow 的多层模糊偏移组合最可控。别用 outline——它不支持模糊半径，也难做渐变辉光；也别只套一层 text-shadow，那只能亮文字，边框还是暗的。
关键参数组合：box-shadow: 0 0 8px #00f, 0 0 16px #00f, 0 0 24px #008。三层叠加能形成由亮到柔的辉光过渡，比单层更接近真实夜光感。
- 第一层（
8px）：高亮核心光晕，颜色最饱和 - 第二层（
16px）：扩大光域，亮度略降 - 第三层（
24px）：外缘柔化，带轻微色相偏移（比如从#00f到#008）增强层次 - 所有偏移值保持
0 0，否则会偏移出“发光错位”感
按钮背景必须深色，否则辉光被吃掉
浅底色（如白色或浅灰）会让 box-shadow 看起来像“发虚”，不是夜光。真正夜光效果需要强对比——背景越暗，光晕越显眼。
推荐配色方案：background: #0a0a1a（近黑蓝） + border: 1px solid #003（加深边缘） + 辉光用蓝紫系（#0af / #30f），避免纯白光（#fff）——它在暗背景下显得刺眼且廉价。
- 别用
background: #000：纯黑缺乏质感，辉光边缘易发“毛边” - 加一点深蓝/深紫底色（
#0a0a1a或#0d0522），让辉光有参照基底 - 如果按钮需悬停增强，只加大阴影扩散值（如
0 0 32px #0af），别改颜色——色相突变会破坏夜光一致性
移动端要注意 filter: brightness() 导致辉光过曝
iOS Safari 和部分安卓浏览器对 box-shadow 的渲染较弱，有人会加 filter: brightness(1.3) 强行提亮，结果在 OLED 屏上反而烧屏感明显、边缘失真。
更稳妥的做法是：用媒体查询单独增强阴影层级，而不是全局提亮。
button {
box-shadow: 0 0 8px #00f, 0 0 16px #00f;
}
@media (prefers-reduced-motion: reduce) {
button { box-shadow: none; }
}
@media (max-width: 768px) {
button { box-shadow: 0 0 12px #00f, 0 0 20px #00f, 0 0 28px #008; }
}
- OLED 屏对高斯模糊敏感，
28px是移动端安全上限，再大容易糊成光斑 - 禁用
filter类提亮手段，它会干扰硬件级亮度控制 - 测试务必真机连 OLED 屏（iPhone、三星旗舰），模拟器看不出辉光衰减问题
box-shadow 的色值和扩散值要卡得准，背景不能太死黑，移动端不能硬加滤镜。调参时盯着真机看 5 秒，眼睛发酸就说明过曝了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
