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 畫素。

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>

列印頁面