outline-style

用於控制元素輪廓樣式的通用類別。

Class Styles

Class	Styles
`outline-solid`	`outline-style: solid;`
`outline-dashed`	`outline-style: dashed;`
`outline-dotted`	`outline-style: dotted;`
`outline-double`	`outline-style: double;`
`outline-none`	`outline-style: none;`
`outline-hidden`	`outline: 2px solid transparent; outline-offset: 2px;`

outline-solid

outline-style: solid;

outline-dashed

outline-style: dashed;

outline-dotted

outline-style: dotted;

outline-double

outline-style: double;

outline-none

outline-style: none;

outline-hidden

outline: 2px solid transparent;
outline-offset: 2px;

範例（Examples）

基本範例（Basic example）

使用 outline-solid 和 outline-dashed 等通用類別來設定元素輪廓的樣式：

outline-solid

outline-dashed

outline-dotted

outline-double

<button class="outline-2 outline-offset-2 outline-solid ...">Button A</button><button class="outline-2 outline-offset-2 outline-dashed ...">Button B</button><button class="outline-2 outline-offset-2 outline-dotted ...">Button C</button><button class="outline-3 outline-offset-2 outline-double ...">Button D</button>

隱藏輪廓（Hiding an outline）

使用 outline-hidden 通用類別隱藏聚焦元素的瀏覽器預設輪廓，同時在強制色彩模式下仍保留輪廓：

嘗試在開發者工具中模擬 `forced-colors: active` 以查看行為

<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />

使用此通用類別時，強烈建議為無障礙性套用你自己的聚焦樣式。

移除輪廓（Removing outlines）

使用 outline-none 通用類別完全移除聚焦元素的瀏覽器預設輪廓：

<div class="focus-within:outline-2 focus-within:outline-indigo-600 ...">  <textarea class="outline-none ..." placeholder="Leave a comment..." />  <button class="..." type="button">Post</button></div>

使用此通用類別時，強烈建議為無障礙性套用你自己的聚焦樣式。

響應式設計（Responsive design）

在 outline-style 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

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