CSS中的text-shadow属性进阶详解

一、属性描述
text-shadow是为文本添加阴影效果的CSS属性，可以创建层次感、立体感或特殊视觉效果。它支持多阴影叠加，每个阴影由一组偏移、模糊半径和颜色值组成。

二、基本语法

text-shadow: h-shadow v-shadow blur-radius color;

• h-shadow：水平阴影位移（必需）
• v-shadow：垂直阴影位移（必需）
• blur-radius：模糊半径（可选，默认0）
• color：阴影颜色（可选，默认文本颜色）

三、单阴影基础实现

1. 简单投影效果：

.text {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
/* 向右下角偏移2px，模糊4px，半透明黑色 */

2. 无模糊的硬阴影：

.text {
  text-shadow: 1px 1px 0 #666;
}
/* 创建类似浮雕的立体效果 */

四、多阴影叠加技术
用逗号分隔多个阴影定义，按书写顺序从下往上叠加：

.text {
  text-shadow: 
    1px 1px 0 white,    /* 底层：白色高光 */
    -1px -1px 0 black;  /* 上层：黑色阴影 */
}
/* 创建雕刻效果，注意书写顺序影响层叠关系 */

五、模糊半径的进阶用法

1. 发光效果（增大模糊半径）：

.glow {
  text-shadow: 0 0 10px #ff0000;
}
/* 零偏移配合大模糊值创建外发光 */

2. 多层模糊叠加：

.text {
  text-shadow: 
    0 0 5px red,
    0 0 10px orange,
    0 0 15px yellow;
}
/* 创建霓虹灯效果，模糊半径递增 */

六、颜色值的特殊处理

1. 使用currentColor继承文本色：

.text {
  color: blue;
  text-shadow: 2px 2px 4px currentColor;
}
/* 阴影颜色自动匹配文本颜色 */

2. 半透明颜色实现融合效果：

.text {
  text-shadow: 
    0 0 20px rgba(255,255,255,0.8),
    0 0 40px rgba(255,0,0,0.6);
}
/* 多层半透明阴影混合创建柔和光晕 */

七、负偏移量的应用

.text {
  text-shadow: -2px -2px 4px #000;
}
/* 向左上方投射阴影，创造逆光效果 */

八、性能优化注意事项

1. 避免过多阴影层数（一般不超过3-4层）
2. 大范围模糊比小范围模糊更耗性能
3. 动画阴影时使用transform代替text-shadow

九、实际应用案例

1. 镂空文字效果：

.hollow {
  color: transparent;
  text-shadow: 0 0 2px black, 0 0 2px black;
}
/* 用阴影模拟文字轮廓 */

2. 3D立体文字：

.3d-text {
  text-shadow: 
    1px 1px 0 #ccc,
    2px 2px 0 #bbb,
    3px 3px 0 #aaa;
}
/* 多层无模糊阴影创建深度感 */

十、浏览器兼容性

• 现代浏览器全面支持
• 多阴影在IE9及以下不支持
• 可使用特征检测作为降级方案