CSS中的text-shadow属性详解

描述
text-shadow属性用于为文本添加阴影效果，可以创建单层或多层阴影，增强文本的视觉层次感和立体感。该属性接受一组值来定义阴影的偏移、模糊半径和颜色。

属性语法

text-shadow: h-shadow v-shadow blur-radius color;
/* 多重阴影用逗号分隔 */
text-shadow: h-shadow1 v-shadow1 blur1 color1, h-shadow2 v-shadow2 blur2 color2;

参数详解

1. h-shadow（必需）：水平阴影偏移量

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

2. v-shadow（必需）：垂直阴影偏移量

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

3. blur-radius（可选）：模糊半径

   • 值越大阴影越模糊
   • 默认值为0（锐利阴影）
   • 不能为负值

4. color（可选）：阴影颜色

   • 可使用任何CSS颜色值
   • 如果省略，默认使用当前文本颜色

基础应用示例

步骤1：创建基本阴影效果

.text {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

• 水平偏移2px向右
• 垂直偏移2px向下
• 4px模糊半径
• 半透明黑色阴影

步骤2：不同方向的阴影效果

/* 左上角阴影 */
.top-left {
  text-shadow: -2px -2px 4px #666;
}

/* 右下角阴影 */
.bottom-right {
  text-shadow: 2px 2px 4px #666;
}

步骤3：模糊半径的影响

.sharp {
  text-shadow: 2px 2px 0px red;  /* 无模糊 */
}

.soft {
  text-shadow: 2px 2px 10px blue; /* 大模糊 */
}

高级技巧与应用

步骤4：创建多重阴影效果

.multi-shadow {
  text-shadow: 
    1px 1px 0px white,
    2px 2px 0px #ccc,
    3px 3px 0px #999;
}

这种技术可以创建凸起或雕刻效果

步骤5：文字描边效果

.stroke-effect {
  color: white;
  text-shadow: 
    -1px -1px 0 black,  
     1px -1px 0 black,
    -1px 1px 0 black,
     1px 1px 0 black;
}

通过四个方向的阴影模拟描边效果

步骤6：发光文字效果

.glow {
  color: #fff;
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff;
}

使用零偏移的大模糊半径创建发光效果

实际应用场景

步骤7：提高文字可读性

.readable {
  color: white;
  text-shadow: 1px 1px 2px black;
}

在复杂背景上通过阴影增强文字对比度

步骤8：创建3D立体效果

.three-d {
  color: #fff;
  text-shadow: 
    1px 1px 0 #ccc,
    2px 2px 0 #c9c9c9,
    3px 3px 0 #bbb,
    4px 4px 0 #b9b9b9,
    5px 5px 0 #aaa;
}

注意事项

1. 性能考虑：过多或过大的阴影可能影响渲染性能
2. 浏览器支持：现代浏览器普遍支持，但需要测试旧版本
3. 可访问性：确保阴影不影响文字的可读性
4. 响应式设计：考虑在不同屏幕尺寸下的显示效果

兼容性写法

.text {
  /* 标准写法 */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  /* 备用方案 */
  color: #000; /* 为不支持text-shadow的浏览器提供备用颜色 */
}

text-shadow属性虽然简单，但通过巧妙的参数组合可以创造出丰富的视觉效果，是提升网页文字设计感的重要工具。