邊框
outline-offset
用於控制元素外框偏移的工具類別。
| 類別 | 樣式 |
|---|---|
outline-offset-<number> | outline-offset: <number>px; |
-outline-offset-<number> | outline-offset: calc(<number>px * -1); |
outline-offset-(length:<custom-property>) | outline-offset: var(<custom-property>); |
outline-offset-[<value>] | outline-offset: <value>; |
範例
基本範例
使用像 outline-offset-2 和 outline-offset-4 這樣的工具類別來變更元素外框的偏移量
outline-offset-0
outline-offset-2
outline-offset-4
<button class="outline-2 outline-offset-0 ...">Button A</button><button class="outline-2 outline-offset-2 ...">Button B</button><button class="outline-2 outline-offset-4 ...">Button C</button>使用自訂值
使用 outline-offset-[<value>] 語法 來設定外框偏移基於完全自訂的值
<div class="outline-offset-[2vw] ..."> <!-- ... --></div>對於 CSS 變數，您也可以使用 outline-offset-(<custom-property>) 語法
<div class="outline-offset-(--my-outline-offset) ..."> <!-- ... --></div>這只是 outline-offset-[var(<custom-property>)] 的一個簡寫形式，它會自動為您新增 var() 函式。
響應式設計
在outline-offset 工具類別 前加上 一個斷點變體，例如 md:，以僅在中等 螢幕尺寸及以上應用該工具類別
<div class="outline md:outline-offset-2 ..."> <!-- ... --></div>在變體文件中瞭解有關使用變體的更多資訊。
