边框
用于控制元素边框样式的实用工具。
| 类名 | 样式 |
|---|---|
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 这样的实用工具来控制子元素之间的边框样式
<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>了解更多关于在 变体文档 中使用变体的信息。