Tailwind CSS - 轮廓偏移

Tailwind CSS 轮廓偏移是一组预定义的类，用于调整元素轮廓与其边框之间的空间或距离。

Tailwind CSS 轮廓偏移类

下面列出了 Tailwind CSS 轮廓偏移类，以及设置轮廓与元素边框之间不同距离的属性。

类	CSS 属性
outline-offset-0	outline-offset: 0px;
outline-offset-1	outline-offset: 1px;
outline-offset-2	outline-offset: 2px;
outline-offset-4	outline-offset: 4px;
outline-offset-8	outline-offset: 8px;

Tailwind CSS 轮廓偏移类的功能

outline-offset-0: 轮廓正好位于元素边缘。
outline-offset-1: 轮廓稍微偏离边缘 1 像素。
outline-offset-2: 轮廓偏离边缘 2 像素。
outline-offset-4: 轮廓偏离边缘 4 像素。
outline-offset-8: 轮廓偏离边缘 8 像素。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 轮廓偏移类示例

以下是 Tailwind CSS 轮廓偏移类的示例，演示如何调整轮廓相对于元素边框的位置。这些类允许您修改轮廓与元素之间的距离。

应用不同的轮廓偏移

此示例演示如何使用 Tailwind CSS 轮廓偏移类来调整元素轮廓与其边框之间的空间。通过应用不同的类，您可以自定义轮廓的位置并创建各种视觉效果。

示例

Open Compiler

 
<!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 Offset 
    </h2>
    <div class="space-y-6">
        <p class="outline outline-offset-auto outline-cyan-500 
            border border-black">
            Auto offset outline.
        </p> 
        <p class="outline outline-offset-0 outline-cyan-600
            border border-black">
            Offset 0: Cyan outline, black border.
        </p>
        <p class="outline outline-offset-2 outline-cyan-600
            border border-black">
            Offset 2: Cyan outline.
        </p> 
        <p class="outline outline-offset-8 outline-cyan-600
            border border-black">
            Offset 8: Cyan outline.
        </p>
        <p>Use <strong>outline-offset-*</strong>
            classes to set different offsets.
        </p>
    </div>
</body>

</html>

更改悬停时的轮廓偏移

此示例演示如何使用 Tailwind CSS 轮廓偏移类来调整轮廓的位置。悬停在每个段落上，查看不同的类 (auto, 0, 1, 2, 4, 8) 如何影响轮廓与元素边框之间的空间。

示例

Open Compiler

<!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 Outline Offset
    </h2>
    <h3 class="underline font-bold mb-2">
        Hover to see different outline offset:
    </h3>
    <div class="space-y-6">
        <p class="outline outline-offset-1 outline-cyan-500 
            border border-black hover:outline-offset-4 
            hover:outline-green-500">
            Offset 1: Moves to 4px and turns green on hover.
        </p>  
        <p class="outline outline-offset-auto outline-cyan-600 
            border border-black hover:outline-offset-2 
            hover:outline-purple-600">
            Offset auto: Moves to 2px and turns purple on hover.
        </p> 
        <p class="outline outline-offset-8 outline-cyan-600
            border border-black hover:outline-offset-0 
            hover:outline-red-500">
            Offset 8: Moves to 0px and turns red on hover.
        </p> 
    </div>
</body>

</html>

打印页面