Tailwind CSS - 边框样式

Tailwind CSS 提供了工具类来控制元素的边框样式。这些样式，例如实线、虚线或点线，对于定义用户界面的视觉语言和层级至关重要。

边框样式类

以下是可用的边框样式工具类列表。请注意，要使边框显示，你还需要指定其宽度（例如 border-2）和颜色（例如 border-slate-500）。

Class	CSS Properties
border-solid	border-style: solid;
border-dashed	border-style: dashed;
border-dotted	border-style: dotted;
border-double	border-style: double;
border-hidden	border-style: hidden;
border-none	border-style: none;

功能与用例

border-solid：最常见的样式，用于标准容器、按钮和输入框。
border-dashed：常用于指示占位内容、交互式拖放区或处于“草稿”状态的元素。
border-dotted：比虚线更柔和的替代方案，适用于微妙的分隔线或装饰性元素。
border-double：一种更具装饰性的样式，可用于特殊提示或复古主题设计。
border-none：明确移除任何边框样式，这对于重置按钮等元素的样式很有用。

实际应用：状态提醒

此示例演示了如何构建一个警报组件。粗实的左边框为警报类型（例如信息、成功、警告）提供了清晰的视觉提示，这是一种常见且有效的 UI 模式。

<div class="space-y-4 p-8">
  <!-- 成功提醒 -->
  <div role="alert" class="p-4 bg-green-100 border-l-4 border-solid border-green-600 text-green-800 rounded-r-lg">
    <p class="font-bold">成功！</p>
    <p>您的个人资料已成功更新。</p>
  </div>

  <!-- 警告提醒 -->
  <div role="alert" class="p-4 bg-yellow-100 border-l-4 border-solid border-yellow-600 text-yellow-800 rounded-r-lg">
    <p class="font-bold">警告</p>
    <p>您的订阅将在 3 天后到期。</p>
  </div>
</div>

交互式示例：文件拖放区

这里，我们使用 border-dashed 样式来指示某个区域是拖放区。悬停时，我们将样式更改为 border-solid 并更新颜色，以向用户提供反馈，表明该区域是可交互的。

<div class="p-8 bg-gray-50 dark:bg-slate-900">
  <div class="flex items-center justify-center w-full">
    <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer
                              bg-gray-100 dark:bg-slate-800 dark:border-slate-600
                              hover:bg-gray-200 hover:border-solid hover:border-blue-500
                              dark:hover:bg-slate-700 dark:hover:border-blue-400
                              transition-all duration-300">
      <div class="flex flex-col items-center justify-center pt-5 pb-6">
        <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">点击上传</span> 或拖放文件</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">SVG、PNG、JPG 或 GIF (最大 800x400px)</p>
      </div>
      <input id="dropzone-file" type="file" class="hidden" />
    </label>
  </div>
</div>

响应式边框样式

你可以使用 md: 和 lg: 等响应式前缀在不同屏幕尺寸下更改边框样式。此示例展示了在小屏幕上边框为 border-dotted（点线），而在中等及更大屏幕上则变为 border-solid（实线）。

<div class="p-8">
    <div class="p-6 text-center text-slate-700 dark:text-slate-200 bg-slate-100 dark:bg-slate-800 rounded-lg
                border-2 border-purple-500 border-dotted
                md:border-solid">
      我在小屏幕上是点线边框，在中等及更大屏幕上是实线边框。
    </div>
</div>