Tailwind CSS - 边框
Tailwind CSS 边框 涵盖了丰富的预定义颜色、宽度和半径类，让您轻松设置元素边框的样式。
Tailwind CSS 边框参考
以下主题介绍如何创建和调整元素边框，包括颜色、宽度、样式、半径等。
| 主题 | 描述 | 示例 |
|---|---|---|
| Tailwind CSS - 边框半径 | Tailwind CSS 中的边框半径控制元素角的圆度。 | |
| Tailwind CSS - 边框宽度 | 边框宽度使用预定义的大小选项控制元素边框的粗细。 | |
| Tailwind CSS - 边框颜色 | 边框颜色设置元素周围边框的颜色元素。 | |
| Tailwind CSS - 边框样式 | 边框样式设置边框的样式，例如实线、虚线或点线。 | |
| Tailwind CSS - 分隔线宽度 | 分隔线宽度控制布局中分隔线之间空间的粗细。 | |
| Tailwind CSS - 分隔线颜色 | 分隔线颜色设置布局中元素之间分隔线的颜色。 | |
| Tailwind CSS - 分隔线样式 | 分隔线样式设置元素之间分隔线的样式。 | |
| Tailwind CSS - 轮廓宽度 | 轮廓宽度控制元素周围轮廓的粗细。 | |
| Tailwind CSS - 轮廓颜色 | 轮廓颜色定义元素周围轮廓的颜色。 | |
| Tailwind CSS - 轮廓样式 | 轮廓样式设置元素轮廓使用的线条类型，例如实线、虚线等等。 | |
| Tailwind CSS - 轮廓偏移 | 轮廓偏移控制元素边框与其轮廓之间的距离。 | |
| Tailwind CSS - 环宽度 | 环宽度控制元素周围环的厚度。 | |
| Tailwind CSS - 环颜色 | 环颜色设置元素周围环的颜色。 | |
| Tailwind CSS - 环偏移宽度 | 环偏移宽度控制环与元素边框之间的距离元素。 | |
| Tailwind CSS - 环偏移颜色 | "环偏移颜色"设置元素边框与其环之间空间的颜色。 |
Tailwind CSS 边框示例
以下示例将说明 Tailwind CSS 边框类，它们可以替换 CSS 中所有与边框相关的属性。
示例 1
在下面的示例中，我们将使用各种 Tailwind CSS 边框类来设置边框样式，包括 style、width、color 和 divide 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-4">
Tailwind CSS Border Radius
</h2>
<p class="font-bold mb-3 underline">
Different Border Radius Sizes:
</p>
<div class="grid grid-cols-3 gap-4 mb-6">
<div>
<p class="underline">rounded-sm</p>
<div class="w-20 h-10 bg-green-400 rounded-sm"></div>
</div>
<div>
<p class="underline">rounded</p>
<div class="w-20 h-10 bg-green-600 rounded"></div>
</div>
<div>
<p class="underline">rounded-full</p>
<div class="w-20 h-10 bg-green-800 rounded-full"></div>
</div>
</div>
<p class="underline mb-8">Use <strong>rounded-*</strong>
for sizes md, lg, xl, 2xl, and 3xl.
</p>
<p class="font-bold mb-4 underline">
Different Border Styles, Colors, and Widths:
</p>
<div class="grid grid-cols-2 gap-5 mb-8">
<div class="flex border-2 w-46 h-14 border-dashed
border-teal-500 items-center justify-center">
Dashed Teal Border (2px)
</div>
<div class="flex border-2 w-46 h-14 border-dotted
border-amber-500 items-center justify-center">
Dotted Amber Border (2px)
</div>
</div>
<p class="font-bold mb-4 underline">
Different Divider Widths, Colors, and Styles:
</p>
<div class="space-y-4">
<div class="divide-y-4 divide-double divide-black">
<p><strong>4px Double divider</strong> example.
</p>
<p>Separates content with a double black color line.</p>
</div>
</div>
</body>
</html>
示例 2
在下面的示例中，我们将介绍 Tailwind 轮廓和圆环的 CSS 属性，包括颜色、样式、宽度、偏移量和偏移颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Borders Examples
</h2>
<p class="font-bold mb-4 underline">
Different Outline Widths, Colors, Styles and Offset:
</p>
<div class="gap-6 grid grid-cols-2 mb-8">
<p class="border border-black outline outline-offset-2
outline-4 outline-indigo-600 outline-double">
4px double indigo outline.
</p>
<p class="outline outline-offset-4 outline-pink-400
border border-black">
Offset-4px: pink outline.
</p>
</div>
<p class="font-bold mb-5 underline">
Different Ring widths and colors with Offset
widths and colors:
</p>
<div class="grid grid-cols-2 gap-5 mb-6">
<p class="ring-2 ring-blue-500 ring-offset-4
border border-black rounded-md">
2-pixel ring with offset-4.
</p>
<p class="ring-2 ring-emerald-600 ring-offset-4 border
ring-offset-emerald-200 border-black rounded-md">
Emerald ring offset color
</p>
</div>
<div class="flex justify-center mt-8 mb-10">
<p class="ring ring-offset-8 ring-red-600
hover:ring-inset hover:ring-offset-8 ring-offset-red-200
border-black p-2 rounded-md hover:ring-purple-600
hover:ring-offset-purple-200 border border-black">
8px red offset, turns purple inset on
<strong>Hover</strong>
</p>
</div>
</body>
</html>
