text-shadow属性通过设置水平垂直偏移、模糊半径和颜色来实现文字阴影效果,可创建简单阴影、浮雕或凹陷等立体感,支持多重阴影叠加以增强视觉层次,合理调整参数能提升设计表现力。

为HTML文字添加阴影效果,主要通过CSS的text-shadow属性实现。这个属性能让文字产生阴影,从而增强视觉层次感,营造立体效果。
基本语法与参数说明
text-shadow的语法格式如下:
- 水平偏移:向右为正,向左为负
- 垂直偏移:向下为正,向上为负
- 模糊半径:值越大,阴影越模糊
- 颜色:可使用十六进制、RGB、rgba或颜色名称
所有参数之间用空格分隔,至少需要前两个参数。
简单阴影示例
给标题添加一个轻微的灰色阴影:
立即学习“前端免费学习笔记(深入)”;
h1 {text-shadow: 2px 2px 3px #999;
}
这样文字会向右下方偏移2像素,并带有轻微模糊,看起来更有深度。
创建立体浮雕或凹陷效果
利用阴影与文字颜色的对比,可以模拟出立体感。
- 浮雕效果:使用浅色上方阴影 + 深色下方阴影
- 凹陷效果:阴影方向与浮雕相反,让文字看起来“陷进去”
.text-emboss {
color: #aaa;
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000;
}
多重阴影叠加增强层次
text-shadow支持多个阴影,用逗号分隔:
这种技巧适合标题或LOGO文字,制造炫酷的发光或拖尾效果。
基本上就这些。合理使用text-shadow能显著提升文字表现力,但避免过度使用影响可读性。关键是根据背景和设计风格调整参数。











