Tailwind CSS - 環寬

Tailwind CSS **環寬** 提供了用於控制元素周圍環的厚度的預定義類。環是在元素邊框外部顯示的視覺邊界。

Tailwind CSS 環寬類

以下是 Tailwind CSS 環寬類及其屬性的列表。這些類可幫助您設定元素周圍環的不同厚度。

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

Tailwind CSS 環寬類的功能

ring-0: 元素周圍沒有環可見。
ring-1: 應用寬度為 1 畫素的環。
ring-2: 應用寬度為 2 畫素的環。
ring: 應用寬度為 3 畫素的環（預設大小）。
ring-4: 應用寬度為 4 畫素的環。
ring-8: 應用寬度為 8 畫素的環。
ring-inset: 應用內嵌環，使環出現在元素邊框內。

Tailwind CSS 環寬類示例

以下是如何輕鬆調整元素周圍環的厚度的 Tailwind CSS 環寬類示例。透過應用不同的類，您可以更改環的寬度，使其根據您的設計需求更突出或更不突出。

設定不同的環寬

此示例顯示了使用 Tailwind CSS 環寬類設定不同的環寬。以下程式碼設定了不同的厚度，從無環到最多 3 畫素。您可以使用 **ring-*** 類根據需要調整環的寬度。

示例

<!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 Width
    </h2> 
    <div class="grid grid-cols-2 gap-6">
        <p class="ring-0 border border-black 
                p-4 rounded-md">
            <strong>ring-0:</strong> No ring visible.
        </p>
        <p class="ring-1 border border-black 
                p-4 rounded-md">
            <strong>ring-1:</strong> 1-pixel ring.
        </p>
        <p class="ring-2 border border-black 
                p-4 rounded-md">
            <strong>ring-2:</strong> 2-pixel ring.
        </p>
        <p class="ring-4 border border-black 
                p-4 rounded-md">
            <strong>ring:</strong> 4-pixel ring.
        </p>
    </div>
    <p class="mt-6 text-center underline font-semibold">
        Use <strong>ring-*</strong> classes to set 
        different ring widths.
    </p>
</body>

</html>

調整環寬和內嵌

此示例顯示瞭如何使用 Tailwind CSS 修改元素的環寬和內嵌。預設的 ring 類在元素周圍新增一個 3 畫素的環，而 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 Width
    </h2> 
    <h3 class="underline font-bold mb-4">
        Applying the Ring Inset Property:
    </h3>
    <div class="grid grid-cols-2 gap-6">
        <p class="ring border border-black p-4 rounded-md">
            <strong>Ring:</strong> By default 3px
        </p> 
        <p class="ring-inset ring-4 border
                border-black p-4 rounded-md">
            <strong>Ring Inset:</strong> Inserts 
            ring inside the border.
        </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 Width 
    </h2>
    <h3 class="font-bold underline mb-4">
        Hover to adjust ring width:
    </h3>
    <div class="grid grid-cols-2 gap-6">
        <p class="ring-4 border border-black p-4 
            rounded-md hover:ring-inset">
            <strong>Ring:</strong> Inset on hover.
        </p>
        <p class="ring-4 ring-inset border border-black p-4
            rounded-md hover:ring-8">
            <strong>Ring-4:</strong> Expand on hover.
        </p>
    </div>
    <div class="flex justify-center mt-6">
        <p class="ring-0 border border-black p-4 
            rounded-md hover:ring-8 hover:ring-purple-500">
            <strong>Ring-0:</strong> Purple 8px on hover.
        </p>
    </div>
</body>

</html>

列印頁面