Tailwind CSS 边框

Tailwind CSS 提供了非常丰富的边框控制类，允许你轻松地设置元素的边框宽度、颜色、样式、圆角等。通过这些类，你可以在不编写自定义 CSS 的情况下，快速地为元素添加或调整边框。

🎯 1. 边框宽度

Tailwind 提供了 border-{width} 类来设置边框宽度。常见的边框宽度有：

1.1 边框宽度类

• border：设置 1px 宽度的边框（默认）。
• border-2：设置 2px 宽度的边框。
• border-4：设置 4px 宽度的边框。
• border-8：设置 8px 宽度的边框。
• border-t-{width}：设置上边框宽度。
• border-r-{width}：设置右边框宽度。
• border-b-{width}：设置下边框宽度。
• border-l-{width}：设置左边框宽度。

1.2 示例

<div class="border p-4">1px 边框</div>
<div class="border-2 p-4">2px 边框</div>
<div class="border-4 p-4">4px 边框</div>
<div class="border-8 p-4">8px 边框</div>

🎯 2. 边框颜色

Tailwind 允许你为边框设置颜色，使用 border-{color} 类。你可以为边框设置任何颜色，包括内置颜色、灰色、透明色、以及自定义颜色。

2.1 边框颜色类

• border-{color}：设置边框颜色，例如 border-red-500、border-blue-400。
• border-transparent：透明边框。
• border-current：继承当前文本颜色。
• border-white：白色边框。
• border-black：黑色边框。

2.2 示例

<div class="border border-red-500 p-4">红色边框</div>
<div class="border border-blue-300 p-4">蓝色边框</div>
<div class="border border-green-600 p-4">绿色边框</div>

🎯 3. 边框样式

Tailwind 支持不同的边框样式，控制边框的显示方式（如实线、虚线等）。

3.1 边框样式类

• border-solid：实线边框（默认）。
• border-dashed：虚线边框。
• border-dotted：点线边框。
• border-double：双线边框。

3.2 示例

<div class="border-2 border-solid border-blue-500 p-4">实线蓝色边框</div>
<div class="border-2 border-dashed border-green-500 p-4">虚线绿色边框</div>
<div class="border-2 border-dotted border-red-500 p-4">点线红色边框</div>
<div class="border-4 border-double border-purple-500 p-4">双线紫色边框</div>

🎯 4. 圆角

你可以使用 Tailwind 的 rounded-{size} 类来设置元素的圆角。不同的圆角大小可以让元素呈现不同的弯曲效果。

4.1 圆角类

• rounded：默认圆角（0.25rem）。
• rounded-sm：小圆角（0.125rem）。
• rounded-lg：大圆角（0.5rem）。
• rounded-xl：超大圆角（0.75rem）。
• rounded-2xl：超大圆角（1rem）。
• rounded-full：完全圆形（适用于正方形元素）。
• rounded-tl-{size}：设置左上角的圆角。
• rounded-tr-{size}：设置右上角的圆角。
• rounded-br-{size}：设置右下角的圆角。
• rounded-bl-{size}：设置左下角的圆角。

4.2 示例

<div class="border-2 border-gray-300 rounded p-4">默认圆角</div>
<div class="border-2 border-gray-300 rounded-sm p-4">小圆角</div>
<div class="border-2 border-gray-300 rounded-lg p-4">大圆角</div>
<div class="border-2 border-gray-300 rounded-xl p-4">超大圆角</div>
<div class="border-2 border-gray-300 rounded-full p-4 w-24 h-24">完全圆形</div>

🎯 5. 边框间距

Tailwind 提供了 divide-{direction} 类来设置子元素之间的边框间距。你可以使用它来在子元素之间添加间隔，并通过 divide-{color} 来设置子元素的分隔颜色。

5.1 边框间距类

• divide-x：在水平方向添加子元素的边框间距。
• divide-y：在垂直方向添加子元素的边框间距。
• divide-{color}：设置边框间距的颜色。

5.2 示例

<div class="divide-y divide-gray-400">
  <div class="p-4">子元素 1</div>
  <div class="p-4">子元素 2</div>
  <div class="p-4">子元素 3</div>
</div>

<div class="divide-x divide-red-500 flex">
  <div class="p-4">子元素 1</div>
  <div class="p-4">子元素 2</div>
  <div class="p-4">子元素 3</div>
</div>

🎯 6. 边框透明度

你还可以使用 border-opacity-{value} 类来设置边框的透明度，value 范围从 0 到 100，表示透明度的百分比。

6.1 示例

<div class="border-2 border-red-500 border-opacity-50 p-4">50% 透明度的红色边框</div>
<div class="border-2 border-blue-500 border-opacity-75 p-4">75% 透明度的蓝色边框</div>

🎯 7. 响应式边框

Tailwind 也支持响应式边框类，你可以根据不同屏幕大小设置不同的边框。

7.1 示例：响应式边框宽度

<div class="border sm:border-2 md:border-4 lg:border-8 p-4">
  根据屏幕尺寸调整边框宽度
</div>

• border：默认边框宽度。
• sm:border-2：在小屏幕下边框宽度为 2px。
• md:border-4：在中等屏幕下边框宽度为 4px。
• lg:border-8：在大屏幕下边框宽度为 8px。

🎯 总结

通过这些边框工具类，Tailwind CSS 让你能够快速创建和控制边框的各个方面，帮助你构建灵活、可定制的 UI 元素。