边框与分割线

边框是区分元素、创建视觉层次的重要工具。Tailwind CSS 提供了完整的边框工具类，包括边框宽度、样式、颜色、圆角以及分割线等。本章将详细介绍如何使用这些工具类。

边框宽度

基本用法

使用 border 或 border-{width} 设置边框宽度：

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

可用的宽度值：

类名	宽度
border	1px
border-0	0px
border-2	2px
border-4	4px
border-8	8px

单边边框

使用 border-{side}-{width} 设置单边边框：

<div class="border-t-4 border-indigo-500 p-4">顶部边框</div>
<div class="border-r-4 border-indigo-500 p-4">右侧边框</div>
<div class="border-b-4 border-indigo-500 p-4">底部边框</div>
<div class="border-l-4 border-indigo-500 p-4">左侧边框</div>

方向修饰符：

修饰符	方向
t	top（上）
r	right（右）
b	bottom（下）
l	left（左）

水平和垂直边框

<div class="border-x-4 border-indigo-500 p-4">左右边框</div>
<div class="border-y-4 border-indigo-500 p-4">上下边框</div>

逻辑属性

支持 RTL（从右到左）语言的逻辑属性：

<div class="border-s-4 border-indigo-500 p-4">起点边框（LTR 时等于左）</div>
<div class="border-e-4 border-indigo-500 p-4">终点边框（LTR 时等于右）</div>

边框样式

Tailwind 提供多种边框样式：

<div class="border-2 border-solid border-gray-900 p-4">实线边框</div>
<div class="border-2 border-dashed border-gray-900 p-4">虚线边框</div>
<div class="border-2 border-dotted border-gray-900 p-4">点线边框</div>
<div class="border-2 border-double border-gray-900 p-4">双线边框</div>
<div class="border-2 border-hidden border-gray-900 p-4">隐藏边框</div>
<div class="border-2 border-none border-gray-900 p-4">无边框</div>

边框颜色

基本用法

<div class="border-2 border-black p-4">黑色边框</div>
<div class="border-2 border-gray-500 p-4">灰色边框</div>
<div class="border-2 border-blue-500 p-4">蓝色边框</div>
<div class="border-2 border-red-500 p-4">红色边框</div>

边框透明度

<div class="border-2 border-blue-500/50 p-4">50% 透明度边框</div>
<div class="border-2 border-blue-500/75 p-4">75% 透明度边框</div>

单边颜色

<div class="border-4 border-t-blue-500 border-r-green-500 border-b-yellow-500 border-l-red-500 p-4">
  各边不同颜色的边框
</div>

任意颜色值

<div class="border-2 border-[#1da1f2] p-4">自定义颜色边框</div>

圆角

圆角用于软化元素的边角，创造更友好的视觉效果。

基本用法

<div class="rounded-none bg-blue-500 p-4">无圆角</div>
<div class="rounded-sm bg-blue-500 p-4">小圆角</div>
<div class="rounded bg-blue-500 p-4">默认圆角</div>
<div class="rounded-md bg-blue-500 p-4">中等圆角</div>
<div class="rounded-lg bg-blue-500 p-4">大圆角</div>
<div class="rounded-xl bg-blue-500 p-4">超大圆角</div>
<div class="rounded-2xl bg-blue-500 p-4">更大圆角</div>
<div class="rounded-3xl bg-blue-500 p-4">特大圆角</div>
<div class="rounded-full bg-blue-500 p-4">完全圆形</div>

圆角大小对照：

类名	圆角半径
rounded-none	0
rounded-sm	0.125rem (2px)
rounded	0.25rem (4px)
rounded-md	0.375rem (6px)
rounded-lg	0.5rem (8px)
rounded-xl	0.75rem (12px)
rounded-2xl	1rem (16px)
rounded-3xl	1.5rem (24px)
rounded-full	9999px

单边圆角

<div class="rounded-t-lg bg-blue-500 p-4">顶部圆角</div>
<div class="rounded-r-lg bg-blue-500 p-4">右侧圆角</div>
<div class="rounded-b-lg bg-blue-500 p-4">底部圆角</div>
<div class="rounded-l-lg bg-blue-500 p-4">左侧圆角</div>

单角圆角

<div class="rounded-tl-lg bg-blue-500 p-4">左上圆角</div>
<div class="rounded-tr-lg bg-blue-500 p-4">右上圆角</div>
<div class="rounded-bl-lg bg-blue-500 p-4">左下圆角</div>
<div class="rounded-br-lg bg-blue-500 p-4">右下圆角</div>

任意圆角值

<div class="rounded-[2rem] bg-blue-500 p-4">自定义圆角值</div>

分割线

分割线用于在相邻元素之间添加边框，是创建列表、导航等布局的利器。

水平分割线

使用 divide-y 在子元素之间添加水平分割线：

<div class="divide-y divide-gray-200">
  <div class="p-4">项目 1</div>
  <div class="p-4">项目 2</div>
  <div class="p-4">项目 3</div>
</div>

垂直分割线

使用 divide-x 在子元素之间添加垂直分割线：

<div class="flex divide-x divide-gray-200">
  <div class="px-4">项目 1</div>
  <div class="px-4">项目 2</div>
  <div class="px-4">项目 3</div>
</div>

分割线宽度

<div class="divide-y divide-y-2 divide-gray-200">
  <div class="p-4">项目 1</div>
  <div class="p-4">项目 2</div>
</div>

<div class="flex divide-x divide-x-4 divide-gray-200">
  <div class="px-4">项目 1</div>
  <div class="px-4">项目 2</div>
</div>

分割线样式

<div class="divide-y divide-dashed divide-gray-200">
  <div class="p-4">虚线分割</div>
  <div class="p-4">虚线分割</div>
</div>

<div class="divide-y divide-dotted divide-gray-200">
  <div class="p-4">点线分割</div>
  <div class="p-4">点线分割</div>
</div>

分割线颜色

<div class="divide-y divide-blue-500">
  <div class="p-4">蓝色分割线</div>
  <div class="p-4">蓝色分割线</div>
</div>

<div class="divide-y divide-gray-200 dark:divide-gray-700">
  <div class="p-4">支持暗黑模式</div>
  <div class="p-4">支持暗黑模式</div>
</div>

反向分割

当使用 flex-row-reverse 或 flex-col-reverse 时，使用 divide-x-reverse 或 divide-y-reverse 确保分割线正确显示：

<div class="flex flex-row-reverse divide-x divide-x-reverse divide-gray-200">
  <div class="px-4">项目 1</div>
  <div class="px-4">项目 2</div>
  <div class="px-4">项目 3</div>
</div>

环

环（ring）是一种类似边框的效果，但不会影响布局，常用于焦点状态。

基本用法

<button class="ring ring-blue-500 px-4 py-2 rounded">蓝色环</button>
<button class="ring-2 ring-blue-500 px-4 py-2 rounded">2px 环</button>
<button class="ring-4 ring-blue-500 px-4 py-2 rounded">4px 环</button>

焦点环

<button class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 px-4 py-2 rounded bg-blue-500 text-white">
  焦点环效果
</button>

环偏移

使用 ring-offset-{width} 设置环与元素之间的偏移：

<button class="ring-2 ring-blue-500 ring-offset-2 px-4 py-2 rounded">偏移环</button>
<button class="ring-2 ring-blue-500 ring-offset-4 px-4 py-2 rounded">更大偏移</button>

环偏移颜色

<button class="ring-2 ring-blue-500 ring-offset-2 ring-offset-gray-100 px-4 py-2 rounded">
  自定义偏移颜色
</button>

轮廓

轮廓与边框类似，但不占用空间，常用于可访问性。

<button class="outline outline-2 outline-blue-500 px-4 py-2 rounded">轮廓按钮</button>
<button class="outline-none focus:outline-2 focus:outline-blue-500 px-4 py-2 rounded">焦点轮廓</button>

轮廓偏移：

<button class="outline outline-2 outline-offset-2 outline-blue-500 px-4 py-2 rounded">
  偏移轮廓
</button>

实战示例

输入框样式

<div class="space-y-4">
  <!-- 基础输入框 -->
  <input type="text" class="border border-gray-300 rounded-lg px-4 py-2 w-full focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition" placeholder="基础输入框">
  
  <!-- 带错误状态 -->
  <input type="text" class="border-2 border-red-500 rounded-lg px-4 py-2 w-full focus:border-red-500 focus:ring-2 focus:ring-red-200 outline-none" placeholder="错误状态">
  
  <!-- 带成功状态 -->
  <input type="text" class="border-2 border-green-500 rounded-lg px-4 py-2 w-full focus:border-green-500 focus:ring-2 focus:ring-green-200 outline-none" placeholder="成功状态">
</div>

卡片边框

<div class="border border-gray-200 rounded-lg p-6 hover:border-blue-500 hover:shadow-lg transition-all duration-300">
  <h3 class="font-semibold text-lg">悬停卡片</h3>
  <p class="text-gray-600 mt-2">悬停时边框变色并添加阴影</p>
</div>

导航列表

<nav class="divide-y divide-gray-100">
  <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50 transition">
    <span>首页</span>
    <span class="text-gray-400">→</span>
  </a>
  <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50 transition">
    <span>产品</span>
    <span class="text-gray-400">→</span>
  </a>
  <a href="#" class="flex items-center justify-between p-4 hover:bg-gray-50 transition">
    <span>关于</span>
    <span class="text-gray-400">→</span>
  </a>
</nav>

标签样式

<div class="flex gap-2">
  <span class="border border-blue-500 text-blue-500 px-3 py-1 rounded-full text-sm">标签</span>
  <span class="border border-green-500 text-green-500 px-3 py-1 rounded-full text-sm">标签</span>
  <span class="border border-red-500 text-red-500 px-3 py-1 rounded-full text-sm">标签</span>
</div>

头像边框

<div class="flex -space-x-2">
  <img class="w-10 h-10 rounded-full border-2 border-white" src="avatar1.jpg" alt="">
  <img class="w-10 h-10 rounded-full border-2 border-white" src="avatar2.jpg" alt="">
  <img class="w-10 h-10 rounded-full border-2 border-white" src="avatar3.jpg" alt="">
  <div class="w-10 h-10 rounded-full border-2 border-white bg-gray-200 flex items-center justify-center text-sm">
    +5
  </div>
</div>

渐变边框

<div class="relative p-[2px] rounded-lg bg-linear-to-r from-pink-500 via-purple-500 to-blue-500">
  <div class="bg-white dark:bg-gray-900 rounded-lg p-4">
    <p class="text-gray-700 dark:text-gray-300">渐变边框效果</p>
  </div>
</div>

表格边框

<table class="min-w-full border border-gray-200 rounded-lg overflow-hidden">
  <thead class="bg-gray-50">
    <tr>
      <th class="border-b border-gray-200 px-4 py-3 text-left">姓名</th>
      <th class="border-b border-gray-200 px-4 py-3 text-left">邮箱</th>
      <th class="border-b border-gray-200 px-4 py-3 text-left">状态</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-200">
    <tr>
      <td class="px-4 py-3">张三</td>
      <td class="px-4 py-3">[email protected]</td>
      <td class="px-4 py-3">
        <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-xs text-green-700">
          活跃
        </span>
      </td>
    </tr>
    <tr>
      <td class="px-4 py-3">李四</td>
      <td class="px-4 py-3">[email protected]</td>
      <td class="px-4 py-3">
        <span class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs text-yellow-700">
          待审核
        </span>
      </td>
    </tr>
  </tbody>
</table>

小结

本章介绍了 Tailwind CSS 的边框工具类：

• 边框宽度：使用 border、border-2、border-4 等设置
• 边框样式：支持实线、虚线、点线、双线等
• 边框颜色：支持任意颜色和透明度
• 圆角：从 rounded-none 到 rounded-full
• 分割线：使用 divide-x 和 divide-y 在元素间添加边框
• 环：使用 ring 创建焦点状态效果
• 轮廓：使用 outline 创建无障碍轮廓线

下一章，我们将学习效果与滤镜的使用方法。