文字陰影簡介

你可以使用 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 上檢視此頁面 • 報告此內容的問題