box-shadow外发光效果关键在足够大的blur-radius（≥20，常用50–120）和透明色，而非多层叠加或扩大spread-radius；偏移量应为0 0，避免裁剪需禁用overflow: hidden。
box-shadow 外发光效果靠模糊半径控制
外发光本质就是高模糊值的 box-shadow，关键不是加多层，而是把 blur-radius 拉够——太小就只是边缘晕开，不够“发散”。常见错误是只调 spread-radius（第三个参数），结果阴影变厚但不透光，看起来像描边而不是发光。
-
blur-radius必须 ≥ 20 才有明显发光感，50–120 是常用区间；数值越大，光晕越柔和、范围越广 - 别省略
color，透明色（如rgba(255,255,255,0.6)）比纯黑/白更自然，避免生硬边界 - 阴影偏移量（前两个参数）建议设为
0 0，否则会偏移发光中心，破坏“包裹感”
单层 box-shadow 就够用，多层反而糊成一片
有人想叠加多个 box-shadow 模拟渐变光晕，实际会导致重叠区域过曝、边缘混沌，尤其在 Safari 和旧版 Edge 中渲染更不稳定。真实项目里，一层高模糊 + 合理透明度，比三层低模糊更可控、更轻量。
- 示例：
box-shadow: 0 0 60px rgba(100, 180, 255, 0.7);—— 蓝色外发光，干净不溢出 - 若需内+外同时发光，才考虑双层：
box-shadow: inset 0 0 20px rgba(0,0,0,0.2), 0 0 60px rgba(100,180,255,0.7); - 注意：Chrome 对超大
blur-radius（>200）可能轻微锯齿，Firefox 更稳，测试时别只看一个浏览器
发光颜色和背景对比度决定视觉强度
同样的 blur-radius，深色背景上浅色发光显眼，浅色背景上深色发光易被吞没。这不是 bug，是光效物理逻辑——没有对比，就没有“光感”。
- 深底配浅光：用
rgba(255, 255, 255, 0.5)或带色相的浅色（如rgba(255, 240, 200, 0.6)） - 浅底配深光：慎用纯黑，改用
rgba(80, 80, 120, 0.4)这类灰蓝，避免像脏污 - 动效中调整发光，优先改
alpha值而非模糊值——后者触发布局重绘，opacity变化更流畅
移动端和 Retina 屏的模糊渲染差异
iOS Safari 和部分安卓 WebView 对高 blur-radius 会自动降级处理，看起来比桌面端“收得紧”，不是代码写错，是渲染策略不同。别强行拉到 200 去硬刚，适配重点是：用足够大的基础值（≥40），再配合 transform: scale(1.01) 微调触发更精细绘制。
- 真机测试必做，模拟器容易误判发光强度
- 如果发光在 iOS 上仍偏弱，可加
-webkit-backdrop-filter: blur(1px);（仅作触发 hack，不真用滤镜） - 不要给发光元素设
overflow: hidden，它会直接裁掉模糊溢出部分——这是最常被忽略的“发光消失”原因
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
