边框
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;
} |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 border-solid
和 border-dotted
等工具来控制元素的边框样式:
¥Use utilities like border-solid
and border-dotted
to control an element's border style:
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>
删除边框(Removing a border)
¥Removing a border
使用 border-none
工具从元素中删除现有边框:
¥Use the border-none
utility to remove an existing border from an element:
<button class="border-none ...">Save Changes</button>
这最常用于删除在较小断点处应用的边框样式。
¥This is most commonly used to remove a border style that was applied at a smaller breakpoint.
设置分隔线样式(Setting the divider style)
¥Setting the divider style
使用 divide-dashed
和 divide-dotted
等工具控制子元素之间的边框样式:
¥Use utilities like divide-dashed
and divide-dotted
to control the border style between child elements:
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>
响应式设计(Responsive design)
¥Responsive design
在 border-style
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="border-solid md:border-dotted ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。