CSS text-shadow 属性详解
text-shadow 是 CSS 中用于为文本添加阴影效果的属性，可以创建视觉层次、增加可读性或实现装饰性效果。
基本语法
text-shadow: h-shadow v-shadow blur-radius color;
参数说明
1. 水平偏移 (h-shadow)
必需参数
指定阴影水平方向的距离
正值：阴影在文本右侧
负值：阴影在文本左侧
单位：px, em, rem 等长度单位
2. 垂直偏移 (v-shadow)
必需参数
指定阴影垂直方向的距离
正值：阴影在文本下方
负值：阴影在文本上方
3. 模糊半径 (blur-radius) - 可选
指定阴影的模糊程度
值越大，阴影越模糊、越淡
默认值：0（无模糊，锐利阴影）
不能为负值
4. 颜色 (color) - 可选
指定阴影的颜色
默认值：当前文本颜色
可以使用任何有效的 CSS 颜色值
使用示例
基本阴影
.simple-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}多重阴影
可以添加多个阴影，用逗号分隔：
.multiple-shadows {
text-shadow:
1px 1px 2px rgba(0, 0, 0, 0.8),
-1px -1px 2px rgba(255, 255, 255, 0.8);
}浮雕/凸起效果
.emboss {
color: #666;
text-shadow:
-1px -1px 1px rgba(255,255,255,0.5),
1px 1px 1px rgba(0,0,0,0.5);
}光晕效果
.glow {
color: white;
text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
}描边效果
.outline {
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}实用技巧
1. 提高可读性
.readable {
color: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
/* 浅色文字在复杂背景上更易读 */2. 创建伪3D效果
.three-d {
color: #ccc;
text-shadow:
1px 1px 0 #999,
2px 2px 0 #999,
3px 3px 0 #999,
4px 4px 2px rgba(0,0,0,0.5);
}3. 霓虹灯效果
.neon {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #ff00de,
0 0 35px #ff00de,
0 0 40px #ff00de;
}text-shadow 属性总结表
| 特性 | 说明 |
|---|---|
| 继承性 | 不继承 |
| 初始值 | none |
| 适用元素 | 所有元素 |
| 动画性 | 是（可进行CSS动画） |
| 百分比值 | 不支持 |
| 默认值 | none |
| 可叠加 | 是，支持多重阴影（逗号分隔） |
| 性能影响 | 较小，但过多复杂阴影可能影响渲染性能 |
| 浏览器支持 | 所有现代浏览器（IE10+） |
注意事项
与
box-shadow的区别：text-shadow应用于文本内容box-shadow应用于元素框模型性能考虑：
避免在大量元素上使用复杂的多重阴影
模糊半径较大时可能影响性能
可访问性：
确保阴影不会降低文本对比度
不要仅依赖阴影传达重要信息
响应式设计：
使用相对单位（em, rem）创建响应式阴影
在小屏幕上考虑减少阴影效果
浏览器兼容性
现代浏览器：完全支持
IE 9 及以下：不支持
IE 10+：支持
移动浏览器：良好支持
text-shadow 是一个强大的 CSS 属性，可以显著增强文本的视觉效果，但应谨慎使用，确保不影响内容的可读性和页面的性能。