答案：HTML5中通过CSS3的text-shadow属性实现文字阴影效果，语法为“水平偏移 垂直偏移 模糊半径 颜色”，支持多重阴影叠加，可创建发光、浮雕、外描边和3D投影等特效，现代浏览器兼容性良好，使用时需注意性能与可读性。
在HTML5网页中实现文字阴影效果，主要依靠CSS3的 text-shadow 属性。它能为文本添加一层或多层阴影，使文字更具立体感和视觉吸引力。掌握这个属性，可以轻松实现多种文字特效。
基础文字阴影语法
text-shadow 的基本语法格式如下：
text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;四个值分别表示：
- 水平偏移：正值向右，负值向左
- 垂直偏移：正值向下，负值向上
- 模糊半径：数值越大，阴影越模糊（可选，默认为0）
- 颜色：支持十六进制、RGB、RGBA等格式（可选，默认为黑色）
示例：
立即学习“前端免费学习笔记（深入）”；
h1 {text-shadow: 2px 2px 4px #666;
}
多重阴影效果
通过逗号分隔，可以为文字添加多个阴影，实现更丰富的层次感。
text-shadow: 1px 1px 2px black,
2px 2px 4px gray;
}
这种叠加方式常用于模拟浮雕、发光或外描边效果。
常见文字特效实现
利用 text-shadow 可以快速实现以下几种流行的文字样式：
1. 发光文字
.glow {
color: yellow;
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #ff8,
0 0 20px #f00;
}
2. 立体浮雕效果
.emboss {
color: #aaa;
text-shadow: 1px 1px 1px #ccc,
-1px -1px 1px #fff;
}
3. 外描边（空心字）
.outline {
color: transparent;
text-shadow: 0 0 2px black,
1px 1px 2px black,
-1px -1px 2px black;
-webkit-text-stroke: 1px black; / 辅助描边 /
}
4. 投影文字（仿3D）
.shadow3d {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1);
}
兼容性与使用建议
text-shadow 在现代浏览器中支持良好，包括Chrome、Firefox、Safari、Edge 和 IE10+。若需兼容旧版IE，可考虑使用滤镜或图片替代。
使用时注意：
- 避免过度使用多层阴影，以免影响页面性能
- 确保阴影不影响文字可读性，尤其在小字号时
- 配合 color 和背景合理搭配，增强整体视觉效果
基本上就这些，不复杂但容易忽略细节。灵活运用 text-shadow，能让网页文字瞬间提升质感。
