邊框
outline-style
用於控制元素外框樣式的工具。
| 類別 | 樣式 |
|---|---|
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-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>隱藏外框
使用 outline-hidden 工具來隱藏焦點元素的預設瀏覽器外框，同時在強制色彩模式下保留外框
嘗試在您的開發人員工具中模擬 `forced-colors: active` 來查看行為
<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />強烈建議在使用此工具時，為了輔助功能，套用您自己的焦點樣式。
移除外框
使用 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>強烈建議在使用此工具時，為了輔助功能，套用您自己的焦點樣式。
響應式設計
前綴一個 outline-style 工具 使用像 md: 這樣的斷點變體，僅在中等 螢幕尺寸及以上時套用該工具
<div class="outline md:outline-dashed ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。
