text-shadow属性可轻松提升文字视觉层次，通过h-offset、v-offset、blur-radius和color四个参数控制阴影效果，支持多重阴影叠加，适用于标题、按钮等文本样式设计，现代浏览器兼容性良好且无需图片或JavaScript。
想让网页上的文字更有层次感和视觉冲击力？text-shadow 是CSS中一个简单却非常实用的属性，能快速为HTML文本添加阴影效果。不需要图片或JavaScript，仅用几行代码就能实现酷炫的文字阴影。
text-shadow 基本语法
text-shadow 属性用于为文本添加阴影，支持多个参数控制阴影的位置、模糊程度和颜色。其基本语法如下：
text-shadow: h-offset v-offset blur-radius color;- h-offset：水平偏移，正值向右，负值向左
- v-offset：垂直偏移，正值向下，负值向上
- blur-radius：模糊半径，值越大阴影越模糊（可选，默认0）
- color：阴影颜色（可选，浏览器会使用文本颜色作为默认）
四个值的顺序不能颠倒，且至少需要前两个偏移值。
常见阴影效果示例
通过调整参数组合，可以实现多种视觉风格。
立即学习“前端免费学习笔记（深入）”；
-
简单投影：让文字略微脱离背景
text-shadow: 2px 2px 3px rgba(0,0,0,0.3); -
外发光效果：模糊大、偏移小的浅色阴影
text-shadow: 0 0 5px #fff, 0 0 10px #fff; -
内凹文字（压印感）：使用浅色阴影向上偏移
text-shadow: 0 -1px 1px #fff; -
多重阴影叠加：用逗号分隔多个阴影定义
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
在HTML中实际应用
可以直接在内联样式中使用，也可以写在CSS文件里。例如：
<h1 style="text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">欢迎来到我的网站
</h1>
或者在CSS中定义类：
.fancy-text {text-shadow: 1px 1px 2px black, 0 0 1em blue;
color: white;
font-size: 2rem;
}
兼容性与注意事项
现代浏览器都支持 text-shadow，包括Chrome、Firefox、Safari、Edge等。IE9及以上也支持，但IE8及以下不支持，需注意兼容需求。
- 避免过度使用模糊值，可能导致文字难以阅读
- 在浅色背景上慎用浅色阴影，容易看不见
- 移动端注意阴影对性能影响较小，但仍建议适度使用
基本上就这些。掌握 text-shadow 能让你的网页标题、按钮文字更具表现力，而且实现起来非常简单。不复杂但容易忽略。
