文本阴影简介

你可以使用 text-shadow 属性为文本应用阴影。此属性接受一个以逗号分隔的阴影值列表。每个阴影值至少需要两个 <length> 值，但最多可以包含三个 <length> 值和一个 color 值。

css

text-shadow: 1px 3px;
text-shadow: 1px -2px 3px white;
text-shadow:
  5px 5px mediumblue,
  10px 10px magenta,
  15px 15px rebeccapurple;

若要移除文本的所有阴影，请使用关键字 none。

css

text-shadow: none;

在本指南中，我们将探讨文本阴影的组成部分，以及如何为一个元素应用多个文本阴影。

文本阴影的组成部分

每个阴影都包含一个水平偏移量、一个垂直偏移量，以及一个可选的模糊半径，顺序如此。你还可以定义阴影的颜色。

水平偏移量

text-shadow 值中的第一个 <length> 表示阴影相对于原始文本的水平偏移量。正值会将阴影向右移动，而负值则会向左移动。0 是一个常见的有效值。

在此示例中，不同的 text-shadow 声明仅在水平偏移量上有所不同。第一个 <length> 值将阴影向左（-30px）或向右（30px）移动。

css

.negative {
  text-shadow: -30px 0 1px red;
}

.positive {
  text-shadow: 30px 0 1px red;
}

.zero {
  text-shadow: 0 0 1px red;
}

<p class="negative">Negative</p>
<p class="positive">Positive</p>
<p class="zero">Zero</p>

p {
  border: 1px solid;
  padding: 20px;
  font-family: sans-serif;
  font-size: 1.25rem;
}

你可能已经注意到，text-shadow 属性对 CSS 盒模型没有影响，这与 outline 属性类似。就像 box-shadow 一样，文本阴影不影响布局，不会触发滚动，也不会影响可滚动溢出区域的大小。虽然文本阴影可以使元素的文本看起来更大，但它们实际上对内容的宽度（或高度）没有影响。

垂直偏移量

text-shadow 值中的第二个 <length> 表示阴影相对于原始文本的垂直偏移量。这个必需值的行为与水平偏移量类似，只是它将阴影向上或向下移动，而不是向左或向右。

在此示例中，不同的 text-shadow 声明仅在垂直偏移量上有所不同。第二个 <length> 值将阴影向上（-30px）或向下（30px）移动。

css

.negative {
  text-shadow: 0 -30px 1px red;
}

.positive {
  text-shadow: 0 30px 1px red;
}

.zero {
  text-shadow: 0 0 1px red;
}

模糊半径

模糊半径由第三个 <length> 值定义，是可选的。如果省略，模糊半径为 0，这会创建一个由前两个长度值定位的文本副本。该值必须为 0 或更大；值越大，阴影效果的扩散范围就越广。

在此示例中，不同的 text-shadow 声明仅在模糊半径上有所不同。第三个 <length> 值要么是无效的（-5px），要么模糊了阴影（5px），要么创建了文本的副本（0）。

css

.negative {
  /* invalid */
  text-shadow: 30px 30px -5px red;
}

.positive {
  text-shadow: 30px 30px 5px red;
}

.zero {
  text-shadow: 30px 30px 0 red;
}

阴影颜色

虽然你可以为一个文本应用多个阴影，但每个阴影都由单一的基础颜色组成。该颜色可以是任何有效的 CSS color 值，如果省略，则默认为 currentcolor。

以下三个阴影在其阴影颜色方面是等效的：

css

.shadow-color {
  text-shadow:
    5px 5px mediumblue,
    10px 10px magenta,
    15px 15px rebeccapurple;
}

.shadow-color-hex {
  text-shadow:
    5px 5px #0000cd,
    10px 10px #ff00ff,
    15px 15px #663399;
}

.shadow-color-rgb {
  text-shadow:
    5px 5px rgb(0 0 205),
    10px 10px rgb(255 0 255),
    15px 15px rgb(102 51 153);
}

多个阴影

你可以通过包含多个以逗号分隔的阴影值，来为同一文本应用多个阴影。

阴影效果按从前到后的顺序应用：第一个阴影在最顶层。

在我们的示例 text-shadow: 5px 5px mediumblue, 10px 10px magenta, 15px 15px rebeccapurple; 中，它定义了三个阴影，蓝色阴影在洋红色阴影之上，而洋红色阴影又在蓝紫色阴影之上。

p {
  text-shadow:
    5px 5px mediumblue,
    10px 10px magenta,
    15px 15px rebeccapurple;
}

<p>I have three shadows</p>

使用透明文本实现多重阴影

阴影绘制在任何背景颜色或图像之上，以及任何边框之下。虽然阴影会相互叠加，但它们不会覆盖文本。文本阴影中没有与 box-shadow 属性的 inset 关键字等效的设置。与盒子阴影不同，文本阴影不会被裁剪到阴影形状的范围内，如果文本是部分透明的，阴影可能会透出来。

以下示例对文本应用了相同的阴影，但使用了不同的 color 属性值。半透明的示例难以阅读，但包含它们是为了演示阴影的渲染方式。

css

p {
  text-shadow:
    5px 5px 0 mediumblue,
    10px 10px 5px magenta,
    15px 15px 10px rebeccapurple;
}

.opaque {
  color: black;
}

.semitransparent {
  color: rgb(0 0 0 / 0.5);
}

.transparent {
  color: transparent;
}

.white {
  color: white;
}

.semi-white {
  color: rgb(255 255 255 / 0.75);
}

<p class="opaque">The text is opaque black</p>
<p class="semitransparent">The text is semiopaque black</p>
<p class="transparent">The text is transparent black</p>
<p class="white">The text is opaque white</p>
<p class="semi-white">The text is semiopaque white</p>

p {
  border: 1px solid black;
  padding: 20px;
  font-family: sans-serif;
  font-size: 1.75rem;
  font-weight: bold;
}

在“透明”示例中，文本是透明的，但完全可读，因为顶层阴影没有模糊。请注意阴影如何出现在文本后面，并且在文本不完全不透明时可见。这一点在“半透明白色”示例中尤其明显。这种行为与非内嵌（non-inset）的盒子阴影不同，后者的阴影在边框的外边缘处被裁剪。

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年8月9日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题