1. 边框
  2. border-style

边框

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-solidborder-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-dasheddivide-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>

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号