CSS中的text-shadow属性详解

描述
text-shadow属性用于为文本添加阴影效果，可以创建单个或多个阴影。每个阴影通过设置水平偏移、垂直偏移、模糊半径和颜色值来定义，能够增强文本的立体感和视觉效果。

属性语法

text-shadow: h-shadow v-shadow blur-radius color;
/* 多个阴影用逗号分隔 */
text-shadow: h-shadow v-shadow blur-radius color, h-shadow v-shadow blur-radius color;

参数详解

1. 水平偏移（h-shadow）：必需值，指定阴影在水平方向的偏移距离

   • 正值：阴影向右偏移
   • 负值：阴影向左偏移

2. 垂直偏移（v-shadow）：必需值，指定阴影在垂直方向的偏移距离

   • 正值：阴影向下偏移
   • 负值：阴影向上偏移

3. 模糊半径（blur-radius）：可选值，指定阴影的模糊程度

   • 0：阴影完全不模糊，边缘锐利
   • 值越大，模糊效果越明显

4. 颜色（color）：可选值，定义阴影的颜色

   • 可接受所有CSS颜色值（关键字、十六进制、RGB、HSL等）
   • 如果省略，默认使用文本颜色

基础应用示例

单阴影效果

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

多阴影效果

.text {
  text-shadow: 
    1px 1px 2px red,
    -1px -1px 2px blue;
}
/* 解释：创建红色右下阴影和蓝色左上阴影 */

常见效果实现

浮雕效果

.emboss {
  color: #ccc;
  text-shadow: 
    -1px -1px 1px white,
    1px 1px 1px black;
}
/* 通过亮色和暗色阴影的对比模拟立体凹陷效果 */

发光效果

.glow {
  color: white;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #ff00de;
}
/* 使用零偏移和大模糊半径创建发光效果 */

高级技巧

多重阴影叠加

.multi-layer {
  text-shadow: 
    0 1px 0 rgba(255,255,255,.4),
    0 -1px 0 rgba(0,0,0,.3),
    1px 0 0 rgba(255,255,255,.2);
}
/* 通过多个细微阴影创建复杂的立体效果 */

动画结合

@keyframes glow {
  0% { text-shadow: 0 0 5px red; }
  50% { text-shadow: 0 0 20px red; }
  100% { text-shadow: 0 0 5px red; }
}

.animated-glow {
  animation: glow 2s infinite;
}

注意事项

1. 阴影的堆叠顺序：先定义的阴影显示在后定义阴影的下方
2. 性能考虑：过多或过大的阴影可能影响渲染性能
3. 可访问性：确保阴影不影响文本的清晰度和可读性
4. 浏览器支持：text-shadow得到所有现代浏览器的良好支持