排版
text-underline-offset
用於控制文字底線偏移的實用工具。
| 類別 | 樣式 |
|---|---|
underline-offset-<number> | text-underline-offset: <number>px; |
-underline-offset-<number> | text-underline-offset: calc(<number>px * -1); |
underline-offset-auto | text-underline-offset: auto; |
underline-offset-(<custom-property>) | text-underline-offset: var(<custom-property>); |
underline-offset-[<value>] | text-underline-offset: <value>; |
範例
基本範例
使用 underline-offset-<number> 實用程式，例如 underline-offset-2 和 underline-offset-4 來變更文字底線的偏移量
underline-offset-1
The quick brown fox jumps over the lazy dog.
underline-offset-2
The quick brown fox jumps over the lazy dog.
underline-offset-4
The quick brown fox jumps over the lazy dog.
underline-offset-8
The quick brown fox jumps over the lazy dog.
<p class="underline underline-offset-1">The quick brown fox...</p><p class="underline underline-offset-2">The quick brown fox...</p><p class="underline underline-offset-4">The quick brown fox...</p><p class="underline underline-offset-8">The quick brown fox...</p>使用自訂值
使用 underline-offset-[<value>] 語法 設定文字底線偏移量基於完全自訂的值
<p class="underline-offset-[3px] ..."> <!-- ... --></p>對於 CSS 變數，您也可以使用 underline-offset-(<custom-property>) 語法
<p class="underline-offset-(--my-underline-offset) ..."> <!-- ... --></p>這只是 underline-offset-[var(<custom-property>)] 的簡寫，它會自動為您新增 var() 函式。
響應式設計
前綴a text-underline-offset 實用程式 使用像 md: 這樣的斷點變體，僅在中 螢幕尺寸及以上套用實用程式
<p class="underline md:underline-offset-4 ..."> <!-- ... --></p>在變體文件中了解更多關於使用變體的資訊。
