文本阴影

文本阴影是CSS3中一个强大的样式属性，能够为文字添加立体感和层次感。通过调整阴影的颜色、模糊度、偏移量等参数，可以实现各种视觉效果，从简单的投影到复杂的发光效果。

基本语法与参数

text-shadow属性的基本语法如下：

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

这四个参数分别代表：

• h-shadow：水平阴影偏移量（必需）
• v-shadow：垂直阴影偏移量（必需）
• blur-radius：模糊半径（可选）
• color：阴影颜色（可选）

例如，为一个标题添加简单的阴影：

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

这段代码会在文字右下方添加一个半透明的黑色阴影，模糊半径为4像素。

多重阴影效果

CSS3允许为同一文本添加多个阴影，只需用逗号分隔不同的阴影值。这种特性可以创建复杂的视觉效果：

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

这种技术常被用来创建"3D文字"效果。通过逐层叠加不同偏移量的阴影，可以模拟出立体感。

发光效果实现

通过设置较大的模糊半径和与文字相同的颜色，可以创建发光效果：

.glow-effect {
  color: #ff0;
  text-shadow: 0 0 10px #ff0, 0 0 20px #ff0;
}

这种效果特别适合用于按钮悬停状态或重要提示文字。调整模糊半径可以控制发光强度，数值越大，光晕范围越广。

浮雕与雕刻效果

通过巧妙设置阴影颜色和位置，可以模拟出浮雕或雕刻效果：

.emboss {
  color: #ccc;
  text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}

.engrave {
  color: #ccc;
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
}

浮雕效果使用浅色阴影在左上角，深色阴影在右下角；雕刻效果则相反。这两种效果都依赖于光线方向的视觉暗示。

响应式文本阴影

结合CSS变量和媒体查询，可以创建响应式的文本阴影效果：

:root {
  --shadow-offset: 2px;
}

@media (max-width: 768px) {
  :root {
    --shadow-offset: 1px;
  }
}

.responsive-shadow {
  text-shadow: 
    var(--shadow-offset) var(--shadow-offset) calc(var(--shadow-offset) * 2) rgba(0,0,0,0.3);
}

这种方法确保在小屏幕上阴影不会过于突出，保持设计的平衡性。

动画与交互效果

文本阴影可以与CSS动画和过渡结合，创建动态效果：

@keyframes pulse {
  0% { text-shadow: 0 0 5px rgba(255,0,0,0.5); }
  50% { text-shadow: 0 0 20px rgba(255,0,0,0.9); }
  100% { text-shadow: 0 0 5px rgba(255,0,0,0.5); }
}

.pulse-text {
  animation: pulse 2s infinite;
}

悬停交互也是一个常见应用：

.hover-effect {
  transition: text-shadow 0.3s ease;
}

.hover-effect:hover {
  text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

性能考量与最佳实践

虽然文本阴影效果强大，但过度使用可能影响性能：

• 避免在大量文本上使用复杂的多重阴影
• 模糊半径越大，性能开销越高
• 考虑使用will-change: text-shadow优化动画性能

对于需要高性能的场景，可以考虑使用Canvas或SVG替代复杂的CSS阴影效果。

创意应用实例

1. 霓虹灯招牌效果：

.neon {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 40px #ff00de;
}

2. 火焰文字效果：

.fire {
  color: #f00;
  text-shadow:
    0 0 4px #fff,
    0 -5px 4px #ff3,
    2px -10px 6px #fd3,
    -2px -15px 11px #f80,
    2px -25px 18px #f20;
}

3. 金属质感文字：

.metal {
  color: #ddd;
  text-shadow:
    0 1px 0 #fff,
    0 -1px 0 #666,
    1px 0 0 #888,
    -1px 0 0 #888;
}

浏览器兼容性与降级方案

虽然现代浏览器普遍支持text-shadow，但需要考虑旧版浏览器的兼容性。可以使用特性检测提供降级方案：

.text-with-shadow {
  color: #333; /* 降级颜色 */
}

@supports (text-shadow: 1px 1px 1px #000) {
  .text-with-shadow {
    color: #fff;
    text-shadow: 1px 1px 2px #000;
  }
}

对于完全不支持CSS3的浏览器，可以考虑使用图片替代或JavaScript polyfill方案。

与其他CSS特性的结合

文本阴影可以与其他CSS3特性结合，创造更丰富的效果：

1. 与背景裁剪结合：

.clip-text {
  background: linear-gradient(to right, #f00, #00f);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.3);
}

2. 与混合模式结合：

.blend-text {
  color: #fff;
  text-shadow: 0 0 10px #f00;
  mix-blend-mode: multiply;
}

3. 与滤镜结合：

.filter-text {
  text-shadow: 0 0 5px #000;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}