# 文字裝飾風格 (11-26-2024)

<figure><img src="https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FvyA3sKku6pZM5uudiGp3%2F%E6%9C%80%E6%96%B0%E6%9B%B4%E6%96%B0%E8%88%87%E5%8A%9F%E8%83%BD%20%E7%B6%B2%E8%B7%AF%E4%B8%B2%E6%B5%81.jpg?alt=media&#x26;token=412eefe4-f608-4383-bed8-8c720077a0e2" alt=""><figcaption></figcaption></figure>

眼光敏銳的設計師都知道，簡單、開箱即用的下劃線並不總是看起來經過深思熟慮。憑藉對文字下劃線和裝飾 CSS 屬性的本機支持，Webflow 現在可以讓您精確控制「樣式」面板中的文字裝飾。現在您可以細化文字裝飾定位，從文字顏色中選擇不同的裝飾顏色，甚至添加波浪線裝飾。

<figure><img src="https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/674510a7c9e0d145f413ebc2_67450fef3907dab7fa537090_text-decor-style-1.png" alt="文字裝飾有點狀、深青色底線，偏移量為 8 像素"><figcaption><p>使用新的文字裝飾樣式，您可以建立彩色的點狀下劃線</p></figcaption></figure>

### 新的文字裝飾樣式

**從今天開始，您將在「樣式」面板 >「版式」部分**找到新&#x7684;**「裝飾」**&#x8A2D;定。此更新引入了高級文字裝飾屬性，使您能夠對下劃線樣式和行為進行無與倫比的控制：

* **裝飾風格**：可選擇實線、虛線、點線、波浪線或雙線。
* **底線偏移**：調整底線的垂直位置。
* **裝飾粗細**：自訂底線和刪除線的粗細。
* **裝飾顏色**：獨立於文字顏色設定裝飾顏色。
* **底線位置**：微調下劃線相對於文字的位置。
* **跳過墨水**：透過避免與字母的上升部分和下降部分重疊來保持下劃線乾淨。

<figure><img src="https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/674510a7c9e0d145f413ebd8_6745104690aca856ee5f44de_text-decor-style-2.png" alt="相同的文本，但現在帶有粗的橙黃色雙下劃線"><figcaption></figcaption></figure>

<figure><img src="https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/674510a7c9e0d145f413ebca_6745106390aca856ee5f5f04_text-decor-style-3.png" alt="相同的文本，但現在有一條粗的粉紅色波浪線貫穿文本"><figcaption><p>文字裝飾控制可以實現許多不同的美觀效果</p></figcaption></figure>

**注意：**&#x6211;們還將 Italicize 屬性重新定位到「更多類型選項」區域，以便更輕鬆地存取相關文字樣式。

#### 嘗試新款式

前往網站上的**樣式面板 > 版式 > 裝飾，**&#x67E5;看正在執行的新選項。您也可以&#x5728;**「樣式面板」>「效果」>「過渡」**&#x4E0B;拉清單中建立 CSS 轉場來為**下劃線偏移**和**裝飾顏色設定動畫。**

[請查看幫助中心](https://help.webflow.com/hc/en-us/articles/35777994706835-Text-decorations-and-underlines)，以取得使用這些新文字裝飾樣式的逐步指南。

<br>
