Tailwind CSS - Outline Width
Tailwind CSS Outline Width 提供了预定义类来调整元素周围轮廓的粗细，从而可以轻松设置所有侧面的粗细。
Tailwind CSS Outline Width 类
以下是可用于设置轮廓粗细的 Tailwind CSS Outline Width 轮廓宽度类和属性列表。
| 类 | CSS 属性 |
|---|---|
| outline-0 | outline-width: 0px; |
| outline-1 | outline-width: 1px; |
| outline-2 | outline-width: 2px; |
| outline-4 | outline-width: 4px; |
| outline-8 | outline-width: 8px; |
Tailwind CSS 轮廓宽度类的功能
- outline-0: 完全删除轮廓。
- outline-1: 将轮廓设置为 1 像素。
- outline-2: 将轮廓设置为 2 像素。
- outline-4: 将轮廓设置为 4 像素。
- outline-8: 将轮廓设置为 8 像素。
Tailwind CSS 轮廓宽度类示例
以下是 Tailwind CSS 轮廓宽度类的示例，展示了如何轻松调整元素周围轮廓的粗细。
设置轮廓宽度
此示例展示了如何使用 Tailwind CSS 类用于应用不同的轮廓宽度。轮廓应用于边框之外，其宽度可以使用 outline-* 类进行调整。它不会影响元素的布局或占用空间。
示例
<!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 Outline Width
</h2>
<div class="space-y-4">
<p class="border border-black outline-offset-2 outline-0 p-4">
Black border with no outline.
</p>
<p class="border border-black outline outline-offset-2
outline-2 outline-green-500 p-4">
Black border with a 2px green outline.
</p>
<p class="border border-black outline outline-offset-2
outline-4 outline-blue-500 p-4">
Black border with a 4px yellow outline.
</p>
<p class="border border-black outline outline-offset-2
outline-8 outline-red-500 p-4">
Black border with an 8px red outline.
</p>
</div>
</body>
</html>
鼠标悬停时轮廓宽度及颜色变化
此示例显示具有不同轮廓宽度和颜色的容器。默认情况下，每个容器都有特定的轮廓颜色和宽度。鼠标悬停在容器上方时，轮廓颜色会变暗，从而提供视觉高亮效果。
示例
<!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 Outline Width
</h2>
<h3 class="text-xl font-semibold mb-4">
Applying hover effects to outline widths:
</h3>
<div class="space-y-6">
<p class="border-2 border-black outline outline-2 outline-offset-2
outline-red-600 p-4 hover:outline-blue-700 hover:outline-4">
Default: 2px red outline; On hover: 4px blue outline.
</p>
<p class="border-2 border-black outline outline-1 outline-offset-2
p-4 outline-green-500 hover:outline-cyan-500 hover:outline-8">
Default: 1px green outline; On hover: 8px cyan outline.
</p>
</div>
</body>
</html>
