outline-width

範例

基本範例

使用 outline 和 outline-<number> 實用程式，例如 outline-2 和 outline-4 來設定元素外框的寬度

<button class="outline outline-offset-2 ...">Button A</button><button class="outline-2 outline-offset-2 ...">Button B</button><button class="outline-4 outline-offset-2 ...">Button C</button>

在 focus 時套用

前綴an outline-width 實用程式，帶有像這樣的變體 focus:* 僅在該狀態下套用實用程式

<button class="outline-offset-2 outline-sky-500 focus:outline-2 ...">Save Changes</button>

在變體文件中了解更多關於使用變體的資訊。

使用自訂值

使用 outline-[<value>] 語法 來設定外框寬度基於完全自訂的值

<div class="outline-[2vw] ...">  <!-- ... --></div>

對於 CSS 變數，您也可以使用 outline-(length:<custom-property>) 語法

<div class="outline-(length:--my-outline-width) ...">  <!-- ... --></div>

這只是 outline-[lengthvar(<custom-property>)] 的簡寫，它會自動為您新增 var() 函數。

響應式設計

前綴an outline-width 實用程式 帶有像 md: 這樣的斷點變體，僅在中medium 螢幕尺寸及以上套用實用程式

<div class="outline md:outline-2 ...">  <!-- ... --></div>

在變體文件中了解更多關於使用變體的資訊。