Tailwind CSS - 边框宽度
Tailwind CSS 的 Border Width 由预定义的 class 组成，可快速调整元素的边框厚度，从细到粗。你可以轻松地将这些厚度应用到元素的四个边。
Tailwind CSS 边框宽度类
以下是 Tailwind CSS 边框宽度类及其属性的列表，展示了如何使用类来调整边框粗细。
| Class | CSS Properties |
|---|---|
| border-0 | border-width: 0px; |
| border-2 | border-width: 2px; |
| border-4 | border-width: 4px; |
| border-8 | border-width: 8px; |
| border | border-width: 1px; |
| border-x-0 | border-left-width: 0px; border-right-width: 0px; |
| border-x-2 | border-left-width: 2px; border-right-width: 2px; |
| border-x-4 | border-left-width: 4px; border-right-width: 4px; |
| border-x-8 | border-left-width: 8px; border-right-width: 8px; |
| border-x | border-left-width: 1px; border-right-width: 1px; |
| border-y-0 | border-top-width: 0px; border-bottom-width: 0px; |
| border-y-2 | border-top-width: 2px; border-bottom-width: 2px; |
| border-y-4 | border-top-width: 4px; border-bottom-width: 4px; |
| border-y-8 | border-top-width: 8px; border-bottom-width: 8px; |
| border-y | border-top-width: 1px; border-bottom-width: 1px; |
| border-s-0 | border-inline-start-width: 0px; |
| border-s-2 | border-inline-start-width: 2px; |
| border-s-4 | border-inline-start-width: 4px; |
| border-s-8 | border-inline-start-width: 8px; |
| border-s | border-inline-start-width: 1px; |
| border-e-0 | border-inline-end-width: 0px; |
| border-e-2 | border-inline-end-width: 2px; |
| border-e-4 | border-inline-end-width: 4px; |
| border-e-8 | border-inline-end-width: 8px; |
| border-e | border-inline-end-width: 1px; |
| border-t-0 | border-top-width: 0px; |
| border-t-2 | border-top-width: 2px; |
| border-t-4 | border-top-width: 4px; |
| border-t-8 | border-top-width: 8px; |
| border-t | border-top-width: 1px; |
| border-r-0 | border-right-width: 0px; |
| border-r-2 | border-right-width: 2px; |
| border-r-4 | border-right-width: 4px; |
| border-r-8 | border-right-width: 8px; |
| border-r | border-right-width: 1px; |
| border-b-0 | border-bottom-width: 0px; |
| border-b-2 | border-bottom-width: 2px; |
| border-b-4 | border-bottom-width: 4px; |
| border-b-8 | border-bottom-width: 8px; |
| border-b | border-bottom-width: 1px; |
| border-l-0 | border-left-width: 0px; |
| border-l-2 | border-left-width: 2px; |
| border-l-4 | border-left-width: 4px; |
| border-l-8 | border-left-width: 8px; |
| border-l | border-left-width: 1px; |
Tailwind CSS 边框宽度类功能
- border-*-0: 将边框宽度设置为 0 像素。
- border-*-2: 将边框宽度设置为 2 像素。
- border-*-4: 将边框宽度设置为 4 像素。
- border-*-8: 将边框宽度设置为 8 像素。
- border: 将所有侧边的边框宽度设置为 1 像素。
用特定侧边（例如 x、y、s、e、t、r、b、l）替换 '*'，其中：
- border-x: 设置左右侧边的边框宽度。
- border-y: 设置上下侧边的边框宽度。
- border-s: 设置内联起始侧边的边框宽度（从左到右文本方向为左侧）。
- border-e: 设置内联结束侧边的边框宽度（从左到右文本方向为右侧）。
- border-t: 设置上侧边的边框宽度。
- border-r: 设置右侧边的边框宽度。
- border-b: 设置下侧边的边框宽度。
- border-l: 设置左侧边的边框宽度。
Tailwind CSS 边框宽度类示例
以下是 Tailwind CSS 边框宽度类的示例，展示如何轻松调整元素边框的厚度。
设置边框宽度
此示例展示如何使用不同的 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-4">
Tailwind CSS Border Width
</h2>
<h3> Combined Border Width Classes</h3>
<div class="border-t-4 border-r-2 border-b-4
border-l-8 border-blue-700 p-4">
This div has:
<ul>
<li>4-pixel border at the top</li>
<li>2-pixel border on the right</li>
<li>4-pixel border at the bottom</li>
<li>8-pixel border on the left</li>
</ul>
</div>
</body>
</html>
特定侧边的边框宽度
此示例展示如何使用 Tailwind CSS 边框宽度类为元素的每个侧边应用不同的边框宽度。您可以针对左侧、右侧、上侧和下侧等个别侧边进行设置。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Border Width
</h2>
<p class="text-xl font-bold mb-4">
Applying different Border Width Classes:
</p>
<div class="grid grid-cols-4 gap-4 mb-6">
<div>
<p class="underline font-bold">border-x-4</p>
<div class="w-20 h-20 border-cyan-600
border-x-4 bg-gray-300">
Left & Right: 4px</div>
</div>
<div>
<p class="underline font-bold">border-y-4</p>
<div class="w-20 h-20 border-cyan-600
border-y-4 bg-gray-300">
Top & Bottom: 4px
</div>
</div>
<div>
<p class="underline font-bold">border-s-4</p>
<div class="w-20 h-20 border-cyan-600
border-s-4 bg-gray-300">
Start 4px
</div>
</div>
<div>
<p class="underline font-bold">border-e-4</p>
<div class="w-20 h-20 border-cyan-600
border-e-4 bg-gray-300">
End 4px
</div>
</div>
</body>
</html>
单独边框宽度设置
本示例展示了如何使用 Tailwind CSS 的 border width classes 为元素的单一边应用边框宽度。你可以单独控制顶部、底部、左侧或右侧边框的厚度。
示例
<!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 Border Width
</h2>
<p class="text-xl font-bold mb-4">
Single-Side Border Width Examples
</p>
<div class="grid grid-cols-4 gap-4 mb-6">
<div>
<p class="underline font-bold mb-2
text-center">border-t-4</p>
<div class="w-20 h-20 border-t-4
border-blue-600 bg-gray-300">
Top: 4px
</div>
</div>
<div>
<p class="underline font-bold">border-b-4</p>
<div class="w-20 h-20 bg-gray-300 border-red-600
border-b-4 ">Bottom: 4px</div>
</div>
<div>
<p class="underline font-bold">border-r-4</p>
<div class="w-20 h-20 border-green-600
border-r-4 bg-gray-300">
Right: 4px
</div>
</div>
<div>
<p class="underline font-bold">border-l-4</p>
<div class="w-20 h-20 border-pink-600
border-l-4 bg-gray-300">
Left: 4px
</div>
</div>
</div>
</body>
</html>
使用边框分隔区域
本示例展示了使用不同边框宽度和颜色来分隔布局中的区域。每段内容使用不同厚度和颜色来突出分隔效果。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 bg-gray-100">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Border Width
</h2>
<h2 class="text-xl font-bold mb-6">
Borders Applied to Divide Sections
</h2>
<div class="max-w-md mx-auto bg-white shadow-lg ">
<div class="p-4 border-b-2 border-blue-500">
<h3 class="text-lg font-semibold">Section 1</h3>
<p>This section has a 2-pixel thick blue
border at the bottom.
</p>
</div>
<div class="p-4 border-b-4 border-green-500">
<h3 class="text-lg font-semibold">Section 2</h3>
<p>This section has a 4-pixel
thick green border at the bottom.
</p>
</div>
<div class="p-4 border-b-8 border-red-500">
<h3 class="text-lg font-semibold">Section 3</h3>
<p>This section has an 8-pixel
thick red border at the bottom.
</p>
</div>
</div>
</body>
</html>