真正发光需3–4层暖色阴影逐级扩散，每层偏移为0、模糊半径递增、颜色饱和度略降且带透明度，如text-shadow: 0 0 8px #ffeb3b, 0 0 16px #ffc107, 0 0 24px #ff9800, 0 0 32px #ff5722；单层仅显毛边，纯白在浅背景易失效。
text-shadow 多层叠加怎么写才真像发光
单层 text-shadow: 0 0 5px #fff 只是毛边，不是发光。真正“光晕感”靠的是 3–4 层暖色阴影逐级扩散，且每层模糊半径递增、颜色饱和度略降。
- 推荐写法：
text-shadow: 0 0 8px #ffeb3b, 0 0 16px #ffc107, 0 0 24px #ff9800, 0 0 32px #ff5722; - 别用纯白
#ffffff——在浅背景上会消失；改用明度高但带黄/橙倾向的色值 - 最后一层可加轻微偏移（如
2px 2px 20px #ff9800）模拟光源方向，增强立体感 - 超过 5 层阴影在低端安卓或旧 iOS 上可能卡顿，日常够用的上限就是 4 层
:hover 时怎么增强发光不卡顿
悬停瞬间突然加第 5 层阴影或把模糊值从 24px 拉到 80px，容易触发重绘抖动，尤其在移动端 WebKit 内核下。
- 正确做法：默认状态就写满全部层级，
:hover只调大模糊半径和透明度，例如：text-shadow: 0 0 12px rgba(255,235,59,0.8), 0 0 24px rgba(255,193,7,0.6), ... - 避免用
box-shadow包整个按钮来“模拟发光”——它会糊掉文字边缘细节，且和text-shadow叠加后视觉混乱 - 过渡属性必须限定：
transition: text-shadow 0.2s ease-out，而不是transition: all .3s - iOS Safari 对 >30px 模糊值渲染偏淡，建议 hover 最大值控制在
40px以内
深色 vs 浅色背景下发光效果为啥总翻车
同一套 text-shadow 参数，在黑色背景上炫酷，在白色背景上可能完全不可见——这不是代码错，是光在不同基底上的反射逻辑不同。
- 深色背景优先用暖黄系（
#ffeb3b→#ff5722），明度高、对比强 - 浅色背景要换冷亮色系（如
#4fc3f7→#00e5ff），并降低各层 opacity（0.4–0.7）防刺眼 - 千万别省略真实测试环节：改完参数立刻切到目标页面背景里看效果，别只在纯黑/纯白临时页调试
- IE10 只认第一个阴影，可用
@supports not (text-shadow: 0 0 10px #000)单独喂一条降级规则
按钮整体发光和文字发光该不该一起上
只给文字加光、按钮本身灰扑扑，用户感知不到“被激活”，效果割裂。但两者叠加又容易糊成一团。
- 文字发光 + 渐变背景是黄金组合：
background: linear-gradient(135deg, #ff9800, #ff5722)，再配暖色text-shadow - 按钮自身用
box-shadow做浮起感即可（如0 4px 12px rgba(0,0,0,0.15)），别加发光类阴影 - 禁用
filter: drop-shadow()替代text-shadow——它作用于整个元素，会把边框也虚化掉 - 移动端记得加
-webkit-text-stroke: 0.5px transparent防锯齿，尤其在高 DPR 屏幕上
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
