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>

打印页面