边框
用于控制元素边框样式的工具类。
| Class | Styles |
|---|---|
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 等工具类来控制元素的边框样式：
边框样式：实线
边框样式：虚线
边框样式：点线
边框样式：双线
<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 ...">保存更改</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>Prefix a border-style utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="border-solid md:border-dotted ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.