31. 边框：宽度、颜色与样式

本节目标：掌握边框宽度、颜色、样式和圆角的完整控制，能灵活运用边框创建各种视觉效果和分隔线。

边框这东西看着简单，但用好了能让界面质感提升不少。Tailwind 把边框拆成了宽度、颜色、样式和圆角几块，各自独立控制。

边框宽度

全方向边框

类名	效果
`border`	1px（默认）
`border-0`	无边框
`border-2`	2px
`border-4`	4px
`border-8`	8px

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

方向性边框

只给某个方向加边框：

类名	方向
`border-t-{n}`	上
`border-r-{n}`	右
`border-b-{n}`	下
`border-l-{n}`	左
`border-x-{n}`	左右
`border-y-{n}`	上下

<!-- 只有底部边框 -->
<div class="border-b-2 pb-4">带下边框的标题</div>

<!-- 只有左右边框 -->
<div class="border-x-2 px-4">左右边框</div>

<!-- 四边不同宽度 -->
<div class="border-t-4 border-r-2 border-b border-l-0">混合边框</div>

Tip

border-b 是最常用的方向性边框——列表项分隔线、卡片底部分隔、表单项下划线都靠它。

边框颜色

border-{color}-{shade} 控制边框颜色：

<div class="border-2 border-blue-500">蓝色边框</div>
<div class="border-2 border-red-500">红色边框</div>
<div class="border border-gray-200">浅灰边框</div>

方向性边框颜色

不同方向可以设置不同颜色：

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

边框透明度

<div class="border-2 border-blue-500/50">半透明蓝色边框</div>

边框样式

控制边框的线条样式：

类名	效果
`border-solid`	实线（默认）
`border-dashed`	虚线
`border-dotted`	点线
`border-double`	双线
`border-none`	无边框

<div class="border-2 border-dashed border-gray-400 p-4">
  虚线边框，常用于拖放区域提示
</div>

<div class="border-2 border-dotted border-blue-500 p-4">
  点线边框
</div>

圆角：border-radius

圆角大小直接影响产品的”性格”——直角显得硬朗，大圆角显得柔和。

整体圆角

类名	效果
`rounded-none`	无圆角
`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`	完全圆形

<button class="rounded">小圆角按钮</button>
<button class="rounded-lg">中圆角按钮</button>
<button class="rounded-full">胶囊按钮</button>

方向性圆角

只给特定角加圆角：

类名	位置
`rounded-t-{size}`	上左 + 上右
`rounded-r-{size}`	上右 + 下右
`rounded-b-{size}`	下左 + 下右
`rounded-l-{size}`	上左 + 下左
`rounded-tl-{size}`	左上角
`rounded-tr-{size}`	右上角
`rounded-bl-{size}`	左下角
`rounded-br-{size}`	右下角

<!-- 只有顶部圆角 -->
<div class="rounded-t-lg">顶部圆角</div>

<!-- 只有左上角圆角 -->
<div class="rounded-tl-xl">左上角圆角</div>

Tip

圆角一致性很重要。一个项目中的按钮、卡片、输入框最好使用相同或相近的圆角大小，否则看起来会很混乱。

分隔线

实际项目中，边框最常见的用途就是做分隔线：

水平分隔线

<!-- 最简单的分隔线 -->
<div class="border-t border-gray-200"></div>

<!-- 或者用一个空元素 -->
<hr class="border-t border-gray-200 my-4">

垂直分隔线

<div class="flex items-center h-8">
  <span>项目1</span>
  <div class="h-full border-l border-gray-300 mx-4"></div>
  <span>项目2</span>
</div>

虚线分隔

<div class="border-t-2 border-dashed border-gray-300 my-6"></div>

实际应用：信息卡片

<!-- 左侧边框强调 -->
<div class="border-l-4 border-blue-500 bg-blue-50 p-4 rounded-r-lg">
  <p class="text-blue-800">这是一条信息提示</p>
</div>

<!-- 成功提示 -->
<div class="border-l-4 border-green-500 bg-green-50 p-4 rounded-r-lg">
  <p class="text-green-800">操作成功</p>
</div>

<!-- 错误提示 -->
<div class="border-l-4 border-red-500 bg-red-50 p-4 rounded-r-lg">
  <p class="text-red-800">发生错误</p>
</div>

实际应用：表单输入框

<input 
  type="text" 
  class="w-full border border-gray-300 rounded-lg px-4 py-2
         focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20
         outline-none transition"
  placeholder="请输入..."
>

本节小结

border / border-{n} → 边框宽度
border-{方向}-{n} → 方向性边框
border-{color}-{shade} → 边框颜色
border-solid / border-dashed / border-dotted → 边框样式
rounded-{size} → 圆角大小
rounded-{位置}-{size} → 方向性圆角
rounded-full → 完全圆形
分隔线用 border-t / border-l 创建