用 text-shadow 实现高亮效果的核心是零偏移、多层递进模糊阴影模拟光晕，十六进制透明度（如 #ffeb3b80）比 rgba() 更简洁且兼容性一致。
直接说结论：用 text-shadow 实现“高亮”效果，关键不是加粗或变色，而是靠浅色、零偏移、多层递进模糊阴影模拟光晕；十六进制透明度（如 #ffeb3b80）能精准控制阴影透出程度，比 rgba() 更简洁且兼容性一致。
text-shadow 零偏移 + 多层模糊才是高亮核心
很多人误以为“高亮”就得用 background-color 或 box-shadow，但那会破坏行内布局、遮挡下划线、不随文字缩放。真正轻量又贴合文本的高亮，是让阴影和文字完全重叠再扩散——也就是把水平/垂直偏移都设为 0。
- 单层
text-shadow: 0 0 8px #ffeb3b是基础发光，但容易发虚、边界生硬 - 两层更稳：
text-shadow: 0 0 4px #fff, 0 0 8px #ffeb3b—— 白色内层打底提亮度，黄色外层撑氛围 - 三层更可控：
text-shadow: 0 0 2px #fff, 0 0 6px #ffeb3b, 0 0 12px #ff9800，逐层加深模糊，光晕过渡自然
十六进制带透明度（#RRGGBBAA）比 rgba() 更省事
CSS 已全面支持 8 位十六进制颜色（如 #00000080），最后两位就是 alpha 通道。它比 rgba(0,0,0,0.5) 少打 6 个字符，且在 Tailwind、PostCSS、VS Code 颜色预览里都原生识别。
- 深色背景配浅色高亮时，用
#ffffff33比rgba(255,255,255,0.2)更快输入、更少出错 - 需要微调透出强度？改最后两位就行：
#ffeb3b1a→#ffeb3b33→#ffeb3b4d，不用换算小数 - 注意：IE 完全不支持 8 位 hex，但 IE 已退出主流；现代所有浏览器（Chrome/Firefox/Safari/Edge）均无兼容问题
::selection 里用 text-shadow 实现选中高亮
用户鼠标拖选文字时想加高亮效果？不能只靠 background-color，否则深色文字在深色背景上可能看不清。给 ::selection 加 text-shadow 是最直接的补救方式。
- 写法必须是：
p::selection { text-shadow: 0 0 3px #ffeb3b80; }，不能漏掉伪元素作用域 - Firefox 旧版本需额外写
p::-moz-selection，但 2026 年已非必需；若项目还要兼容 Firefox 68 以下，才建议保留 - 别用
box-shadow替代——它作用在整块选区盒子上，无法对每个字单独发光，边缘锯齿明显
容易被忽略的渲染细节
高亮阴影看着简单，但实际在 Retina 屏、缩放页面、font-smoothing 开启时，模糊半径数值会“失真”。比如 blur-radius: 5px 在 2x 屏上等效于 10px 渲染，可能导致光晕过厚。
- 稳妥做法：把模糊值控制在
2px–6px区间，超过8px就容易糊成一团，失去“高亮”感 - 字体越细（如
font-weight: 300），越要减小模糊值；粗体（600+）可适当加到6px - 动态内容（如 Vue/React 组件内插值）中，避免用 JS 拼接
text-shadow字符串——CSS 变量或 class 切换更稳定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
