Tailwind CSS - Outline Offset

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

Tailwind CSS Outline Offset 类

以下是 Tailwind CSS Outline Offset 轮廓偏移类的列表，这些类的属性用于设置轮廓与元素边框之间的不同距离。

Tailwind CSS 轮廓偏移类的功能

• outline-offset-0:轮廓位于元素边缘。
• outline-offset-1:轮廓距离边缘略微偏离 1 个像素。
• outline-offset-2:轮廓距离边缘 2 个像素。
• outline-offset-4:轮廓距离边缘 4 个像素。
• outline-offset-8:轮廓距离边缘 8 个像素。

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-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)如何影响轮廓与元素边框之间的间距。

示例

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