css制作阴影文字

使用 text-shadow 属性制作阴影文字

text-shadow 是 CSS 中专门用于为文本添加阴影效果的属性。其基本语法为：

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

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

基础阴影效果

.shadow-text {
  text-shadow: 2px 2px #333;
  font-size: 24px;
}

这段代码会创建向右下方偏移2像素的灰色阴影。

模糊阴影效果

.blur-shadow {
  text-shadow: 0 0 8px rgba(0,0,0,0.5);
  color: white;
}

这种无偏移但带模糊的效果常用于发光文字。

多重阴影效果

.multi-shadow {
  text-shadow: 
    1px 1px 1px #000,
    -1px -1px 1px #fff;
  color: #555;
}

可以叠加多个阴影创建立体效果。

霓虹灯效果

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

通过多层模糊阴影模拟霓虹灯发光效果。

长投影效果

.long-shadow {
  color: #fff;
  text-shadow: 
    1px 1px #333,
    2px 2px #333,
    3px 3px #333;
}

通过连续偏移创建长投影效果。

注意事项

• 阴影颜色建议使用RGBA值控制透明度
• 过大的模糊半径可能导致性能问题
• 多重阴影的渲染顺序是从前往后叠加
• 确保阴影与文字颜色有足够对比度