Tailwind CSS - 環繞偏移寬度

Tailwind CSS **環繞偏移寬度** 提供預定義類來控制元素邊框與其環繞之間的空間。這允許您調整環繞距元素邊緣的偏移距離。

Tailwind CSS 環繞偏移寬度類

以下是 Tailwind CSS 環繞偏移寬度類和屬性的列表，它們設定環繞與元素之間不同的間距。

類	CSS 屬性
ring-offset-0	--tw-ring-offset-width: 0px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-1	--tw-ring-offset-width: 1px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-2	--tw-ring-offset-width: 2px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-4	--tw-ring-offset-width: 4px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-8	--tw-ring-offset-width: 8px; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);

Tailwind CSS 環繞偏移寬度類的功能

ring-offset-0: 環繞與元素邊緣之間沒有額外空間。
ring-offset-1: 在環繞與元素邊框之間新增 1 畫素的空間。
ring-offset-2: 在環繞與元素邊框之間新增 2 畫素的空間。
ring-offset-4: 在環繞與元素邊框之間新增 4 畫素的空間。
ring-offset-8: 在環繞與元素邊框之間新增 8 畫素的空間。

Tailwind CSS 環繞偏移寬度類示例

以下是 Tailwind CSS 環繞偏移寬度類的示例，展示瞭如何調整元素邊框與其環繞之間的空間。這些類允許您控制環繞距元素的偏移距離。

設定環繞偏移寬度

此示例展示瞭如何使用 Tailwind CSS 類來應用不同的環繞偏移寬度。環繞偏移應用於邊框之外，其寬度可以使用 **ring-offset-*** 類進行調整。它不會影響元素的佈局或佔用的空間。

示例

<!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 Ring Offset Width
    </h2> 
    <div class="grid grid-cols-2 gap-6">
        <p class="ring-offset-0 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-0</strong>
        </p>
        <p class="ring-offset-1 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-1</strong>
        </p>
        <p class="ring-offset-4 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-4</strong>
        </p>
         <p class="ring-offset-8 ring border border-black 
                p-4 rounded-md">
            <strong>ring-offset-8</strong>
        </p> 
    </div>
    <p class="mt-6 text-center underline font-semibold">
        Use <strong>ring-offset-*</strong> classes to adjust 
        the ring offset width.
    </p>
</body>

</html>

使用 ring-offset 應用偏移寬度

此示例展示瞭如何使用 Tailwind CSS 的環繞偏移寬度類來調整元素邊框與其環繞之間的空間。**ring-inset** 類將環繞定位在邊框內並設定環繞偏移，這將在元素邊框內顯示環繞。

示例

<!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 Ring Offset Width
    </h2> 
    <h3 class="font-bold underline mb-5">
       Applies offset width using the ring-offset classes:
    </h3>
    <div class="grid grid-cols-2 gap-6">
        <p class="ring-offset-2 ring ring-inset border 
            ring-teal-600 border-black p-4 rounded-md">
            <strong>ring-offset-2</strong>
        </p>
        <p class="ring-offset-4 ring ring-inset border 
            ring-teal-600 border-black p-4 rounded-md">
            <strong>ring-offset-4</strong>
        </p>
    </div>
    <div class="flex justify-center mt-4">
     <p class="ring-offset-8 ring ring-inset border 
            ring-teal-600 border-black p-4 rounded-md">
            <strong>Applies ring-offset-8</strong>
        </p> 
    </div>
</body>

</html>

基於懸停的環繞偏移調整

此示例展示瞭如何使用 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 Ring Offset Width
    </h2> 
    <h3 class="font-bold underline mb-4">
        Hover to adjust ring offset width:
    </h3>
    <div class="grid grid-cols-2 gap-6">
        <p class="hover:ring-offset-2 hover:ring border 
            ring-teal-600 border-black p-4 rounded-md">
        <strong>2px Offset on Hover</strong>
        </p>
        <p class="hover:ring-offset-4 hover:ring border 
                    ring-teal-600 border-black p-4 rounded-md">
            <strong>4px Offset on Hover</strong>
        </p>
    </div>
    <div class="flex justify-center mt-6">
        <p class="ring ring-offset-8 ring-red-600 hover:ring-inset 
            hover:ring-offset-8  border border-black p-4
            rounded-md hover:ring-purple-500">
            <strong>8px offset, inset on hove</strong> 
        </p>
    </div>
</body>

</html>

列印頁面