邊框
border-style
用於控制元素邊框樣式的實用程式。
| 類別 | 樣式 |
|---|---|
border-solid | border-style: solid; |
border-dashed | border-style: dashed; |
border-dotted | border-style: dotted; |
border-double | border-style: double; |
border-hidden | border-style: hidden; |
border-none | border-style: none; |
divide-solid | & > :not(:last-child) { border-style: solid; } |
divide-dashed | & > :not(:last-child) { border-style: dashed; } |
divide-dotted | & > :not(:last-child) { border-style: dotted; } |
divide-double | & > :not(:last-child) { border-style: double; } |
divide-hidden | & > :not(:last-child) { border-style: hidden; } |
divide-none | & > :not(:last-child) { border-style: none; } |
範例
基本範例
使用 border-solid 和 border-dotted 等實用程式來控制元素的邊框樣式
border-solid
border-dashed
border-dotted
border-double
<div class="border-2 border-solid ..."></div><div class="border-2 border-dashed ..."></div><div class="border-2 border-dotted ..."></div><div class="border-4 border-double ..."></div>移除邊框
使用 border-none 實用程式來移除元素現有的邊框
<button class="border-none ...">Save Changes</button>這通常用於移除在較小的斷點套用的邊框樣式。
設定分隔線樣式
使用 divide-dashed 和 divide-dotted 等實用程式來控制子元素之間的邊框樣式
01
02
03
<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500"> <div>01</div> <div>02</div> <div>03</div></div>響應式設計
前綴a border-style 實用程式 帶有像 md: 的斷點變體，僅在中型 螢幕尺寸及以上套用實用程式
<div class="border-solid md:border-dotted ..."> <!-- ... --></div>了解更多關於在變體文件中使用變體的資訊。
