text-shadow是实现文字阴影和基础发光最直接的浏览器原生方案，需多层叠加、依背景反向选色，并注意层级限制与高DPI适配。
用 text-shadow 实现文字阴影和基础发光
浏览器原生支持的最直接方式就是 text-shadow，它能同时控制偏移、模糊半径和颜色，组合起来就能模拟“发光”效果。关键不是加一层阴影，而是叠加多层——比如让模糊半径大、颜色浅、无偏移的阴影包住文字，视觉上就发亮了。
常见错误是只写一层 text-shadow: 0 0 5px #fff，结果在深色背景上不明显，或在浅色背景上“糊成一团”。实际要根据背景反向选色：深底用浅色（#fff 或 rgba(255,255,255,0.8)），浅底用深色（rgba(0,0,0,0.5)）。
实操建议：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 单层弱发光：
text-shadow: 0 0 8px rgba(255, 255, 255, 0.7) - 双层增强（更均匀）：
text-shadow: 0 0 4px #fff, 0 0 8px #fff - 避免过度模糊（
blur > 20px）导致文字边缘失焦，尤其小字号下明显 - 别对
body全局设text-shadow，会影响所有文本，包括按钮、表单，易读性下降
用 filter: drop-shadow() 给文字块整体加外发光
filter: drop-shadow() 不作用于文字本身，而是对整个元素的“轮廓”投阴影，适合需要柔和、无方向性外光的场景（比如标题卡片、徽章文字）。它和 text-shadow 最大区别是：前者会绕过透明区域，后者严格按字形渲染。
立即学习“前端免费学习笔记（深入）”；
典型误用是把它当 text-shadow 替代品写在 span 上——但 drop-shadow() 对内联元素效果受限，最好包裹一层 display: inline-block 或直接用块级元素。
实操建议：
- 给标题加柔光边：
filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6)) - 注意性能：该滤镜会触发重绘，频繁动画中慎用；Chrome 下开启硬件加速可缓解（加
transform: translateZ(0)） - IE 完全不支持，如需兼容，得回退到
text-shadow方案
用 box-shadow + background-clip 做描边式发光
当你要的是“文字边缘高亮”而非内部发光时（比如霓虹灯效果），box-shadow 配合 background-clip: text 是更可控的方式。原理是把渐变或纯色背景“裁剪”到文字形状，再用 box-shadow 给这个背景层加发光，文字本身保持透明。
容易踩的坑是忘了加 -webkit-background-clip: text 和 color: transparent，否则文字还是默认色，背景根本看不见。
实操建议：
- 基础霓虹效果：
color: transparent;<br>background: linear-gradient(45deg, #ff00cc, #3333ff);<br>-webkit-background-clip: text;<br>background-clip: text;<br>text-shadow: 0 0 10px rgba(255, 0, 204, 0.5);
-
background-clip: text在 Firefox 中需启用layout.css.background-clip-text.enabled（新版已默认开启） - 不要对动态内容（如用户输入的文本）滥用此方案，字体加载失败时可能彻底不可见
发光效果在移动端和 Retina 屏的适配要点
高分辨率屏下，text-shadow 的像素值会显得更细、更锐利，原本在普通屏上合适的 4px 模糊半径，在 Retina 上可能像没加一样。这不是 bug，是设备像素比放大了 CSS 像素。
没有自动适配的 CSS 方案，只能手动调整。最稳妥的做法是用媒体查询区分设备像素比：
实操建议：
- 对 2x 屏加大模糊值：
@media (-webkit-min-device-pixel-ratio: 2) {<br> .glow { text-shadow: 0 0 12px rgba(255,255,255,0.8); }<br>} - 避免用
em或rem做text-shadow的模糊单位，它会随字体缩放，导致发光大小失控 - 安卓 WebView 对多层
text-shadow渲染有性能抖动，建议限制在 2–3 层以内
真正难调的不是怎么写，而是不同背景色、不同字体粗细、不同字号下，同一组参数表现差异极大。上线前务必在真机上逐个测深色/浅色模式、系统字体缩放开启状态。
