CSS 文字外框怎麼做？用多層 text-shadow 畫出圓潤中文描邊

先看最短版本：8 個方向疊一圈#

如果外框只有 1px 左右，先從八方向版本開始就夠直覺：

1
<h1 class="text-outline">文字外框</h1>

1
.text-outline {
2
  color: #ffffff;
3
  text-shadow:
4
    1px 0 0 #166534,
5
    0.71px 0.71px 0 #166534,
6
    0 1px 0 #166534,
7
    -0.71px 0.71px 0 #166534,
8
    -1px 0 0 #166534,
9
    -0.71px -0.71px 0 #166534,
10
    0 -1px 0 #166534,
11
    0.71px -0.71px 0 #166534;
12
}

每一組值的格式都是：

1
text-shadow: offset-x offset-y blur-radius color;

以 1px 0 0 #166534 為例，瀏覽器會把同一段文字往右移 1px，不加模糊，再用綠色畫一次。把副本放到上、下、左、右與四個斜角，文字外圍就會被同色副本包住。

這裡的 0.71px 約等於 1 × cos(45°)。若斜角也寫成 1px 1px，它與中心的直線距離會變成約 1.41px，外框就不再是同一個半徑。

為什麼多層 text-shadow 不會把原字蓋住？#

CSS Text Decoration 規格把外部 text-shadow 的繪製層級放在元素背景與文字之間。簡化後可以理解為：

1
文字填色
2
────────
3
多層 text-shadow
4
────────
5
元素背景

所以這個做法不需要再複製一份 HTML，也不用靠偽元素把原字疊回來。只要文字的 color 是不透明色，位於中央的陰影自然會被文字本身蓋住，畫面上主要看到的就是外圍部分。

text-shadow 也不參與排版計算。外框變粗不會增加元素寬高，因此要自己檢查標題是否貼到容器邊緣、相鄰行是否太近，必要時增加 padding 或 line-height。

外框加粗後，為什麼八方向開始出現缺口？#

把八個位移全部從 1px 改成 4px，方向之間的距離也會跟著拉開。中文字的轉角與細小筆畫可能露出缺口，看起來像鋸齒或八角形。

比較穩定的做法是同時增加兩件事：

1. 增加圓周上的方向數量，讓相鄰副本更靠近。
2. 增加內圈，填補中心到最外圈之間的空白。

這個幾何概念接近把字形向外做形態膨脹（morphological dilation）：以不同方向的位移副本掃過字形，外緣便會接近圓形結構元素擴張後的輪廓。方向越密，圓周近似越平滑；但它仍是離散取樣，不是真正連續的向量描邊。

用 JavaScript 產生 24 層圓形外框#

手動維護 24 組座標很容易改錯，我把它整理成一個沒有框架依賴的產生器：

1
function createTextOutline({
2
  color,
3
  radius = 3,
4
  rings = 2,
5
  steps = 16,
6
}) {
7
  const shadows = [];
8

9
  for (let ring = 1; ring <= rings; ring += 1) {
10
    const currentRadius = (radius * ring) / rings;
11
    const currentSteps = Math.max(8, Math.round((steps * ring) / rings));
12

13
    for (let index = 0; index < currentSteps; index += 1) {
14
      const angle = (Math.PI * 2 * index) / currentSteps;
15
      const x = Number((Math.cos(angle) * currentRadius).toFixed(2));
16
      const y = Number((Math.sin(angle) * currentRadius).toFixed(2));
17

18
      shadows.push(`${x}px ${y}px 0 ${color}`);
19
    }
20
  }
21

22
  return shadows.join(", ");
23
}
24

25
const title = document.querySelector(".text-outline");
26

27
title.style.textShadow = createTextOutline({
28
  color: "#166534",
29
  radius: 3,
30
  rings: 2,
31
  steps: 16,
32
});

預設會產生：

• 內圈：半徑 1.5px，8 個方向。
• 外圈：半徑 3px，16 個方向。
• 合計：24 層沒有模糊的 text-shadow。

x = r × cos(θ)、y = r × sin(θ) 會把每個位移點放在同一個圓周上。用 CSS 變數可以把填色、外框色集中管理：

1
.text-outline {
2
  --text-fill: #ffffff;
3
  --text-outline: #166534;
4

5
  color: var(--text-fill);
6
}

接著把 getComputedStyle(title).getPropertyValue("--text-outline") 傳給產生器即可。如果樣式在建置時就能確定，也可以先執行一次產生器，把結果貼回 CSS，避免每次載入都用 JavaScript 設定。

text-shadow 與 -webkit-text-stroke 怎麼選？#

-webkit-text-stroke 雖然保留了 -webkit- 前綴，但 MDN 已標示為 Baseline Widely available；現在選擇它或 text-shadow，重點不是「能不能用」，而是想要哪一種外觀與維護方式。

如果 -webkit-text-stroke 的結果在實際字型上已經好看，我會直接用它。只有在「描邊壓縮字面」或「轉角太尖」真的看得出來時，才換成多層陰影。

注意：外框效果高度依賴字型輪廓、字重、裝置像素密度與瀏覽器的反鋸齒結果。不要只在一組英文字型上調完就結束，至少要用實際會出現的繁體中文字、數字與標點一起測試。

三種常用的 CSS 文字特效#

同一個 text-shadow 還能做出其他效果，差別主要在位移、模糊半徑與疊加順序。

1
.text-glow {
2
  color: #d9f99d;
3
  text-shadow:
4
    0 0 4px #84cc16,
5
    0 0 14px #65a30d,
6
    0 0 34px #3f6212;
7
}

1
.text-emboss {
2
  color: #cbd5e1;
3
  text-shadow:
4
    -1px -1px 0 #ffffff,
5
    2px 2px 0 #475569;
6
}

1
.text-gradient {
2
  color: #38bdf8;
3
  background: linear-gradient(90deg, #38bdf8, #a3e635);
4
  background-clip: text;
5
  -webkit-background-clip: text;
6
  -webkit-text-fill-color: transparent;
7
}

實作時要記得的限制#

• 只套在少量大字：24 層陰影乘上大量節點，會增加繪製成本；不要替整篇內文描邊。
• 不要套在包住內文的父層：text-shadow 會繼承。若把效果設在整張卡片，子元素文字也可能一起吃到陰影。
• 粗細增加時同步加密方向：只放大半徑、不增加取樣點，外框會露出缺口。
• 預留外框空間：陰影不影響盒模型，也不會替你撐開容器。
• 檢查可讀性：裝飾不能取代文字與背景的基本對比。WCAG 對一般文字要求至少 4.5:1，大型文字至少 3:1；背景複雜時，外框可當作 halo 協助分隔，但仍要用實際相鄰顏色檢查。

這次最後留下的判斷很簡單：細描邊、數量多，先用 -webkit-text-stroke；少量粗體中文字遇到尖角或字面被吃掉，再用多圈、多方向的 text-shadow。未來要調粗細時，不只改半徑，也一起調整圓周取樣數。

常見問題#