index.html中怎么给文字添加阴影效果

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

有人试过给 <span> 加 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 屏上视觉重量可能差一倍。调试时最好真机预览，别只盯着开发机看。