HTML 本身不支持文字阴影，必须用 CSS 的 text-shadow 属性实现；其格式为 text-shadow: h-offset v-offset blur-radius color;，支持多层叠加、注意 IE9+ 兼容性，不可用 box-shadow 替代，中文使用需控制模糊半径与透明度以保障可读性。
用 text-shadow 属性最直接
HTML 本身不提供文字阴影功能，必须靠 CSS 的 text-shadow 实现。它接受一组偏移量、模糊半径和颜色值，格式固定：text-shadow: h-offset v-offset blur-radius color;。比如给标题加浅灰阴影：
h1 { text-shadow: 2px 2px 4px #ccc; }
其中 2px 是向右偏移，2px 是向下偏移，4px 控制边缘柔和度，#ccc 是阴影颜色。
text-shadow 多层叠加能做出立体或发光效果
单个阴影太单薄？可以逗号分隔写多组值，实现多层叠加。常见组合有：
- 外发光：用大
blur-radius+ 透明色，如text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); - 内凹感：加一个反方向的深色阴影，如
text-shadow: 1px 1px 0 #000, -1px -1px 0 #fff; - 兼容性注意：IE9+ 支持，但 IE9 不支持
rgba()透明色，用纯色更稳妥
别用 box-shadow 替代 text-shadow
有人试过给 加 box-shadow 模拟文字阴影，这会出问题：
-
box-shadow作用在元素盒模型上，文字换行或有内边距时阴影会错位 - 字体抗锯齿、子像素渲染会让
box-shadow边缘发虚，不如text-shadow精准贴合字形 - 性能上，
text-shadow是浏览器专为文字优化的渲染路径，尤其在移动端更稳定
中文文字阴影要留意字体粗细和模糊半径
中文字体笔画多、结构密，盲目套用英文阴影参数容易糊成一团：
- 避免过大
blur-radius（比如超过6px），否则“你好”变“一坨灰” - 优先用较小偏移（
1px或2px）+ 低透明度（rgba(0,0,0,0.3)）保证可读性 - 思源黑体、HarmonyOS Sans 等现代中文字体对
text-shadow渲染更友好；老系统用宋体时建议关闭阴影或仅用于大标题
实际项目里最容易被忽略的是中文字体在不同 DPI 下的渲染差异——同一组 text-shadow 值，在 Windows 高分屏和 macOS Retina 屏上视觉重量可能差一倍。调试时最好真机预览，别只盯着开发机看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
