Tailwind CSS 边框

边框是定义元素轮廓、分隔内容和创建视觉层次的重要工具。Tailwind 提供了一套完整的工具类来精细控制边框的每一个方面。

Border Width (边框宽度)

使用 border-{width} 工具类来设置所有四个方向的边框宽度。

• border-0: border-width: 0px;
• border: border-width: 1px; (最常用)
• border-2, border-4, border-8

你也可以单独设置某个方向的边框宽度：

• border-t-2: 上边框
• border-r-4: 右边框
• border-b-8: 下边框
• border-l-0: 左边框

<div class="border-2 ...">...</div>
<div class="border-b-4 ...">...</div>

Border Color (边框颜色)

使用 border-{color} 来设置边框的颜色。你可以使用调色板中的任何颜色。

<input class="border-2 border-sky-500 ...">

<!-- 悬停时改变边框颜色 -->
<button class="border border-slate-300 hover:border-slate-400 ...">
  Save Changes
</button>

与背景颜色类似，你也可以使用 border-opacity-{amount} 来控制边框颜色的不透明度。

Border Style (边框样式)

使用 border-{style} 来设置边框的样式。

• border-solid: (默认) 实线
• border-dashed: 虚线
• border-dotted: 点状线
• border-double: 双实线
• border-none: 无边框

<div class="border-4 border-dashed border-gray-200 ...">...</div>

Border Radius (边框圆角)

使用 rounded-{radius} 来为元素添加圆角。

• rounded-none: 无圆角
• rounded-sm: 小圆角
• rounded: 标准圆角
• rounded-md: 中等圆角
• rounded-lg: 大圆角
• rounded-xl, rounded-2xl, rounded-3xl
• rounded-full: 完全圆角，常用于创建圆形头像。

你也可以为每个角单独设置圆角：

• rounded-t-lg: 只设置顶部两个角的圆角。
• rounded-r-xl: 只设置右侧两个角的圆角。
• rounded-bl-2xl: 只设置左下角的圆角。
• rounded-tr-full: 只设置右上角的圆角。

<img class="rounded-full w-24 h-24" src="...">
<div class="rounded-t-lg bg-white shadow-md">...</div>

Divide (分割线)

当你有一组元素，并希望在它们之间添加边框作为分割线时，可以使用 divide-{x|y}-{width} 和 divide-{color}。

• divide-y: 在垂直排列的元素之间添加水平分割线。
• divide-x: 在水平排列的元素之间添加垂直分割线。

<div class="flex flex-col divide-y divide-gray-200">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

这比为每个元素单独添加 border-b 要方便得多，因为它会自动跳过最后一个元素。

通过这些边框工具，你可以精确地为你的组件和布局添加清晰的轮廓和分隔。