Tailwind CSS - 边框

Tailwind CSS：边框、轮廓与光环

样式化元素的边界对于创建定义清晰、组织良好和交互性强的用户界面至关重要。Tailwind CSS 提供了一套全面的工具类，用于管理边框、轮廓和光环，每个都在 UI 设计中扮演着独特的角色。

核心边框相关工具类

下面是用于样式化元素边界的关键工具类类别的摘要。每个类别都控制元素外观和行为的不同方面。

主题	描述	常见用例
边框圆角	使用 rounded-md、rounded-full 等类控制元素角的圆度。	柔化按钮、卡片和容器的外观。
边框宽度	控制元素边框的粗细，例如 border、border-2、border-t-4。	定义容器边界或创建视觉分隔符。
边框颜色	使用你的主题颜色调色板设置边框颜色，例如 border-slate-200。	样式化输入框、卡片或将边框与品牌颜色匹配。
边框样式	设置边框的图案，例如 border-solid、border-dashed 或 border-dotted。	创建风格化分隔符或占位元素。
分割工具类	在子元素之间添加边框，例如 divide-y、divide-x、divide-slate-200。	样式化堆叠列表、菜单或分组中的分隔项。
轮廓工具类	控制元素轮廓的宽度、颜色、样式和偏移量。	对可访问性至关重要： 创建可见的键盘焦点指示器。
光环工具类	使用 box-shadow 添加实心颜色光环。与边框不同，它们不影响布局。	高级焦点状态、选择指示器或分层效果。

实际应用示例

让我们看看这些工具类如何协同工作以构建现代 UI 组件。

示例 1：使用边框和分割线样式化卡片

此示例使用 border 和 rounded-lg 来定义卡片的主要形状。在内部，divide-y 用于在页眉、主体和页脚部分之间创建细微的水平线，在不增加额外标记的情况下提供清晰的视觉分隔。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card with Borders and Dividers</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-8 flex justify-center">

  <div class="max-w-sm w-full bg-white rounded-lg border border-slate-200 shadow-md divide-y divide-slate-200">
    <div class="p-4">
      <h3 class="font-bold text-lg text-slate-800">Project Update</h3>
    </div>
    <div class="p-4 text-slate-600">
      <p>The Q3 project roadmap has been finalized. Please review the attached document and provide feedback by EOD Friday.</p>
    </div>
    <div class="p-4 flex justify-end">
      <button class="px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-md hover:bg-blue-700">View Details</button>
    </div>
  </div>

</body>
</html>

示例 2：使用光环创建可访问的表单输入框

此输入字段演示了焦点状态的最佳实践方法。它有一个默认边框。在获得焦点时，边框颜色会改变，并添加一个光环。光环对于焦点状态非常出色，因为它们绘制在边框外部，不影响元素的尺寸，并且可以轻松地通过颜色和不透明度进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible Form Input</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8 flex justify-center">

  <div class="w-full max-w-xs">
    <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
    <div class="mt-1">
      <input type="email" name="email" id="email"
             class="block w-full px-3 py-2 bg-white rounded-md shadow-sm
                    border border-gray-300
                    placeholder-gray-400
                    focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
             placeholder="you@example.com">
    </div>
  </div>

</body>
</html>

最佳实践与主要区别

• 边框（Border）： 标准样式。是盒模型的一部分，因此添加边框可能会改变元素的总尺寸并影响布局。用于永久性边界。
• 轮廓（Outline）： 绘制在边框外部。不影响布局。其主要目的是为了可访问性（焦点状态）。在某些浏览器中不能有圆角。
• 光环（Ring）： 轮廓的现代替代方案。通过 box-shadow 实现，因此不影响布局，可以进行偏移，并支持 border-radius。非常适用于高度样式化的焦点和选择状态。