text-shadow 文本阴影属性
最后更新：2026-09-13
text-shadow text-shadow 文本阴影属性
text-shadow 属性用于给文本添加阴影效果，让文字在背景上更具立体感和视觉层次。它支持设置水平偏移、垂直偏移、模糊半径和阴影颜色四个值，并且可以同时添加多个阴影，用逗号分隔，实现发光、浮雕、描边等丰富的视觉效果。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 是 |
| 适用于 | all |
| 可动画 | shadow |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
text-shadow: none | <shadow>#;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | 关键字 | 无文本阴影 |
<shadow> | 类型 | 水平偏移 垂直偏移 模糊半径 颜色 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-shadow | ✓ v10 | ✓ v12 | ✓ v3.5 | ✓ v1.1 | ✓ v9.5 |
| 所有主流浏览器均支持 | |||||
提示： 将模糊半径设为 0、偏移设为 1px 可以模拟文字描边效果，但真正的文字描边建议使用 -webkit-text-stroke。
注意： 阴影过多或模糊半径过大会影响文字可读性，应适度使用，并确保与背景有足够的对比度。
❓ 常见问题
Qtext-shadow 和 box-shadow 有什么区别？
Atext-shadow 作用于文字内容本身，跟随文字形状；box-shadow 作用于整个元素盒子，生成矩形阴影。text-shadow 没有 spread（扩展半径）参数，也不能使用 inset 内阴影。
Qtext-shadow 可以添加多个阴影吗？
A可以。多个阴影用逗号分隔，先写的渲染在上层。参数依次为水平偏移、垂直偏移、模糊半径、颜色。多层阴影常用于霓虹发光、立体字等效果。
Q怎么用 text-shadow 给文字加描边？
A用 4 个方向各 1px 的阴影模拟描边：text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000。更标准的方式是 -webkit-text-stroke: 1px #000。
🏷️ 相关属性
💡 相关案例
📚 相关教程
