#29 CSS 立體字、霓虹字、外框字、漸層字：text-shadow、-webkit-text-stroke、-webkit-background-clip

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。

---

之前我們都是著重在網頁排版上，今天我們要來做點吸睛的文字視覺效果！我們將會使用 CSS 的 text-shadow、-webkit-text-stroke、-webkit-background-clip，製作出許多特效文字：如霓虹字、立體字、外框字、漸層字等等，可以應用在網頁主視覺上。

使用網頁的文字製作主視覺，雖然不及圖片來得變化多端，但是使用 HTML 與 CSS 製作的話，比較容易被搜尋到，對於 SEO 還是利大於弊。

↓ 今日學習重點 ↓

• 了解 CSS 的 text-shadow 與其應用

• 了解製作文字外框的方法

• 了解如何製作 CSS 文字遮罩

---

一、文字陰影：text-shadow

CSS 中的 text-shadow 可以製作文字的陰影，陰影可以做到許多有趣的事情，我們可以透過它做出立體字、霓虹字等效果。

1. 基本寫法

首先，我們要先了解 text-shadow 的基本寫法…