在css中如何用text-shadow制作文字阴影

text-shadow 属性可为文字添加阴影，语法为：水平偏移 垂直偏移 模糊半径 阴影颜色；支持多重阴影与 rgba 颜色，增强视觉层次。

在 css 中，text-shadow 属性可以为文字添加阴影效果，增强视觉表现力。它支持多个参数来控制阴影的位置、模糊程度和颜色。

基本语法

text-shadow 的语法格式如下：

text-shadow: 水平偏移 垂直偏移 模糊半径 阴影颜色；

• 水平偏移（必填）：向右为正，向左为负
• 垂直偏移（必填）：向下为正，向上为负
• 模糊半径（可选）：值越大，阴影越模糊，默认为 0（无模糊）
• 阴影颜色（可选）：不设置时 浏览器 通常使用文字颜色

简单示例

给文字添加一个向右下角的灰色阴影：

h1 {
  text-shadow: 2px 2px 3px #999;
}

这会让文字产生轻微立体感，常用于标题设计。

立即学习 “ 前端免费学习笔记（深入）”；

绘影字幕

视频字幕制作神器、轻松编辑影片

69

查看详情

多重阴影效果

你可以通过逗号分隔添加多个阴影，实现更复杂的效果：

p {
  text-shadow: 1px 1px 1px #ccc,
          2px 2px 3px #999,
          0 0 10px rgba(0,0,0,0.3);
}

这种叠加方式可以做出发光、浮雕或投影等高级效果。

实用技巧

• 使用 rgba 或 hsla 颜色可以让阴影更自然，比如半透明黑色
• 较大的模糊值配合小偏移能模拟 发光效果
• 负的水平或垂直值可让阴影出现在文字左侧或上方
• 在深色背景上建议用较亮的阴影，浅色背景则用深色阴影提高对比度

基本上就这些，合理使用 text-shadow 能显著提升文字的视觉层次。

以上就是在