纯 CSS 可通过 box-shadow（容器）或 text-shadow + background-clip: text（文字）模拟渐变发光效果，需控制模糊半径、颜色透明度，并注意尺寸、定位与浏览器兼容性，IE 中应降级处理。
纯 CSS 实现的渐变背景本身不带发光效果，但可以通过 box-shadow 或 text-shadow（针对文字）叠加模拟“发光感”，关键在于控制阴影的模糊半径、颜色和透明度，而不是依赖 JavaScript 或 Canvas。
用 background: linear-gradient() 配合 box-shadow 实现容器发光渐变
直接给带渐变背景的元素加内/外阴影是最常用且兼容性好的方式。注意：必须确保元素有明确尺寸（width/height 或 min-height），否则阴影可能不可见。
-
box-shadow的第四项（模糊半径）设为较大值（如40px），配合半透明白色或渐变同色系颜色，才能出“光晕”感 - 避免用
inset阴影做外发光，它只作用于内部边缘；外发光必须用默认（非 inset）模式 - 若容器内容需交互（如按钮、链接），记得加
z-index和position: relative防止阴影被遮挡
div.glow-gradient {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
width: 300px;
height: 200px;
box-shadow: 0 0 40px rgba(106, 17, 203, 0.6);
}
文字渐变 + 发光：用 background-clip: text 和 text-shadow
HTML 中的文字无法直接设渐变背景，需靠 background-clip: text + -webkit-text-fill-color: transparent 借位实现；再叠一层 text-shadow 模拟发光。仅在现代浏览器（Chrome/Firefox/Safari 15.4+）有效。
- 必须加
-webkit-前缀才能生效，background-clip: text本身无前缀支持不全 -
text-shadow推荐用单层大模糊（如0 0 12px rgba(255,255,255,0.8)），多层阴影性能差且易糊成一团 - 不要对
<input>或<button>内文本直接套该写法——表单控件文本渲染机制不同，大概率失效
h1.glow-text {
background: linear-gradient(90deg, #ff8a00, #e52e70);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}
IE 不支持？别硬扛，用降级方案保底
IE 完全不支持 background-clip: text 和部分 box-shadow 组合（如多层或超大模糊）。强行兼容会大幅增加代码复杂度，得不偿失。
立即学习“PHP免费学习笔记（深入）”；
- 渐变背景本身可用
filter: progid:DXImageTransform.Microsoft.gradient(...)降级，但发光效果只能舍弃 - 建议用
@supports检测background-clip或box-shadow模糊值支持，有则启用发光，无则回退纯色+普通阴影 - 真实项目中，若统计显示 IE 使用率 后端通常已不配 IE 友好前端资源
真正难的是调参：同一组渐变色，在深色/浅色页面背景下，box-shadow 的 rgba() 透明度和模糊值要重调；手机 Safari 对超大 box-shadow 渲染偏暗，常需提高颜色亮度。这些细节没法套公式，得真机反复试。
