Tailwind CSS - 轮廓宽度

Tailwind CSS 轮廓宽度提供预定义的类来调整元素周围轮廓的粗细，使轻松设置所有侧面的粗细成为可能。

Tailwind CSS 轮廓宽度类

以下是您可以用来设置轮廓粗细的 Tailwind CSS 轮廓宽度类和属性列表。

类	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>

打印页面