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; }

示例

基本示例

使用类似 border-solidborder-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-dasheddivide-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>

了解更多关于在 变体文档 中使用变体的信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策