真实光衰减需用rgba分层控制：内层高alpha（0.85）+小模糊（5px），中层中alpha（0.5）+色相微调+中模糊（12px），外层低alpha（0.15）+深色+大模糊（28px）。
text-shadow 多层 rgba 颜色如何模拟真实光衰减
纯色 text-shadow 叠加（比如全用 #0af）会显得“塑料感”重，因为现实中光线离光源越远，不仅变模糊，还自然变淡、略偏灰——这靠固定十六进制色做不到。rgba() 是唯一能独立控制每层“浓度”的方式，必须用。
常见错误是外层直接写 rgba(0, 170, 255, 0.1)，结果光晕发虚不聚。正确做法是：内层高 alpha（0.8–0.9）、中层中等（0.4–0.6）、外层低 alpha（0.1–0.2），同时模糊半径非线性放大（5px → 12px → 28px），才能逼近空气散射的指数衰减曲线。
- 第一层：
text-shadow: 0 0 5px rgba(0, 170, 255, 0.85)—— 紧贴文字，亮核清晰 - 第二层：
text-shadow: 0 0 12px rgba(0, 150, 240, 0.5)—— 色相微调防生硬，透明度明显下降 - 第三层：
text-shadow: 0 0 28px rgba(0, 80, 180, 0.15)—— 颜色同步变深+降 alpha，避免“浮在空中”
linear-gradient 背景里怎么让透明度变化更符合物理规律
用 linear-gradient(to right, transparent, #0af) 这种写法，透明到实色是线性过渡，但人眼感知的光强衰减接近指数函数——中间段会显得“断层”。要修复，得把透明部分拉长、实色部分压缩。
实测有效写法是：background: linear-gradient(to right, transparent 0%, transparent 40%, #0af 60%, #0af 100%)。这样前 40% 完全透明，后 40% 才真正显色，中间 20% 是过渡带，视觉上更平滑、有纵深感。
立即学习“前端免费学习笔记（深入）”；
- 别用
transparent, #0af两色直切——过渡太急，像LED灯条 - 三段式写法（透明→半透→实色）比两段式更可控，尤其适配深色背景
- 如果用于按钮或边框，记得配合
background-clip: padding-box，防止渐变溢出圆角
为什么 hsl() + 动画比 rgb() 更适合做流动光效
用 @keyframes 动画 rgb() 值（比如从 rgb(0,170,255) 到 rgb(100,200,255)）时，R/G/B 通道各自线性变化，中间必然经过浑浊的灰紫色，破坏霓虹感。而 HSL 的 hue 是环形值，hsl(200, 100%, 60%) → hsl(240, 100%, 60%) 是纯色相位移，全程饱和、干净。
实际做流动光效时，只动 hue，saturation 和 lightness 锁死，动画才丝滑。例如：
@keyframes glow-hue {
0% { color: hsl(200, 100%, 60%); }
100% { color: hsl(260, 100%, 60%); }
}
- hue 动画范围建议控制在 60° 以内（如 200°→260°），太大容易跳色
- 搭配
cubic-bezier(0.3, 0.7, 0.4, 1)缓动，比ease-in-out更贴近光流动的加速-匀速-减速过程 - 别在
text-shadow里动画 hue——浏览器渲染压力大，应只动画文字本体颜色，阴影用静态 rgba 层叠
深色模式下光效容易过曝，怎么安全降亮度
很多人在 @media (prefers-color-scheme: dark) 里直接给 text-shadow 加 filter: brightness(0.7)，结果文字发灰、光晕糊成一片。根本问题在于：brightness() 是像素级压暗，不区分光晕层级，破坏了原本设计的衰减结构。
真正该做的是分层降 alpha + 微调色相。例如原光效用 rgba(0, 170, 255, 0.8)，深色模式下改为 rgba(0, 150, 240, 0.6)，同时外层从 0.15 降到 0.08。这样光晕层次还在，只是整体收敛、不刺眼。
- 别碰
blur-radius——模糊半径一改，整个光晕结构就垮了 - 深色模式下可额外加一层极淡的
text-shadow: 0 0 40px rgba(0, 0, 0, 0.05)，模拟环境光吸收，增强沉浸感 - 所有深色模式调整，必须在深色背景（如
#121212）下实机验证，预览工具里的模拟常不准
