Tailwind CSS 核心语法篇 三：边框

3. 边框 (Borders)

边框（Borders）用于在元素周围创建可见的轮廓线，是组织和分隔内容、增强组件视觉层次感的重要工具。通过组合使用圆角、宽度、颜色和样式工具，可以轻松地为按钮、卡片、输入框等元素添加精美的边框效果。

3.1 边框圆角 (Border Radius)

圆角是现代 UI 设计中不可或缺的元素，它可以让界面看起来更柔和、更友好。rounded-{size} 工具用于快速为元素添加不同程度的圆角，其中 rounded-full 是创建圆形头像或徽章的利器。

常用类名说明CSS 等效示例
rounded-sm小圆角border-radius: 0.125rem;
rounded-lg大圆角border-radius: 0.5rem;
rounded-xl超大圆角border-radius: 0.75rem;
rounded-full最常用。完全圆角，用于创建圆形元素border-radius: 9999px;
rounded-t-lg仅在 顶部 应用大圆角border-top-left-radius: 0.5rem; ...
rounded-r-lg仅在 右侧 应用大圆角border-top-right-radius: 0.5rem; ...

代码范例：不同圆角效果的展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Radius</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8 flex items-center justify-center space-x-8">
    <!-- 大圆角 -->
    <div class="w-24 h-24 bg-sky-500 flex items-center justify-center text-white font-bold rounded-lg shadow-md">
      -lg
    </div>
    <!-- 完全圆角，用于头像 -->
    <img src="https://picsum.photos/100" alt="Avatar" class="w-24 h-24 rounded-full shadow-md object-cover" />
    <!-- 仅顶部圆角 -->
    <div class="w-24 h-24 bg-sky-500 flex items-center justify-center text-white font-bold rounded-t-xl shadow-md">
      -t-xl
    </div>
  </body>
</html>

3.2 边框宽度、颜色与样式 (Width, Color & Style)

边框的宽度、颜色和样式是定义其视觉表现的基础。这三者通常会结合使用。border 类用于设置一个默认的 1px 边框，border-{side} 可以只在特定边上添加边框，而 border-{style} 则可以改变边框的线条样式。

实用技巧: 在处理表单输入框时，通过 focus: 伪类来改变边框颜色 (focus:border-sky-500) 是提升用户体验的常见做法。

常用类名类别说明
borderWidth在所有边上设置 1px 宽度的边框
border-4Width在所有边上设置 4px 宽度的边框
border-b-2Width常用。仅在底部设置 2px 宽度的边框，常用于分隔线
border-slate-300Color设置边框颜色为 slate-300
border-sky-500Color设置边框颜色为 sky-500
border-solidStyle实线边框 (默认)
border-dashedStyle虚线边框
border-dottedStyle点状边框

代码范例：带交互效果的输入框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Width & Color</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8 flex items-center justify-center">
    <!-- 
      默认状态是灰色边框。
      当输入框获得焦点时 (focus:)，移除默认的 outline，
      并将边框颜色变为 sky-500，同时添加一个同色的 ring (外发光)。
    -->
    <input 
      type="text" 
      placeholder="Click me" 
      class="border border-slate-300 rounded-md px-3 py-2 transition-colors
             focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500" 
    />
  </body>
</html>

3.3 分隔线 (Divide)

divide 工具类可以方便地在 Flex 或 Grid 布局的 子元素之间 添加边框分隔线，而无需为每个子元素单独添加边框。这对于创建列表、菜单或分段控件非常高效。

核心用法:

  1. 在父元素上添加 divide-y (水平分割) 或 divide-x (垂直分割)。
  2. 在父元素上添加 divide-{color} 来设置分隔线的颜色。
常用类名说明
divide-y在 Flex (列) 或 Grid 布局的子元素之间添加 水平 分隔线
divide-x在 Flex (行) 布局的子元素之间添加 垂直 分隔线
divide-slate-200设置分隔线的颜色
divide-dashed设置分隔线的样式为虚线

代码范例：使用 divide 创建一个列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Divide Utility</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8 flex items-center justify-center">
    <div class="w-full max-w-md bg-white rounded-lg shadow overflow-hidden">
      <!-- 在 ul 元素上使用 divide-y 和 divide-slate-200 -->
      <ul class="divide-y divide-slate-200">
        <li class="px-6 py-4 hover:bg-slate-50">First Item</li>
        <li class="px-6 py-4 hover:bg-slate-50">Second Item</li>
        <li class="px-6 py-4 hover:bg-slate-50">Third Item</li>
      </ul>
    </div>
  </body>
</html>

3.4 轮廓与外环 (Outline & Ring)

轮廓（outline）和外环（ring）用于在元素边框 外部 绘制线条，它们 不占用布局空间，因此不会引起元素尺寸变化或推开相邻元素。这使得它们成为处理 焦点状态 的理想选择。

Ring vs. Outline:

  • ring (外环): 推荐使用。ring 工具类可以很好地处理圆角，并且支持 ring-offset（外环偏移），可以创建出更美观的焦点效果。
  • outline (轮廓): 传统方式，但对圆角的支持不佳，样式选项也较少。
常用类名类别说明
focus:ring-2Ring Width获得焦点时，显示一个 2px 宽的外环
focus:ring-blue-500Ring Color设置焦点外环的颜色
focus:ring-offset-2Ring Offset设置外环的偏移量，使其与元素本身产生间距
outline-noneOutline移除浏览器默认的轮廓样式

代码范例：使用 ring 创建现代化的焦点效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ring Utility</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8 flex items-center justify-center space-x-6">
    <!-- 
      通过组合 focus:ring 和 focus:ring-offset，
      可以在按钮获得焦点时创建出清晰且美观的视觉指示。
    -->
    <button class="px-6 py-2 bg-blue-600 text-white rounded-lg shadow
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
      Click Me
    </button>
  </body>
</html>