Tailwind CSS - 輪廓寬度

Tailwind CSS 輪廓寬度提供預定義的類來調整元素周圍輪廓的粗細，使輕鬆設定所有側面的粗細成為可能。

Tailwind CSS 輪廓寬度類

以下是您可以用來設定輪廓粗細的 Tailwind CSS 輪廓寬度類和屬性列表。

類	CSS 屬性
outline-0	outline-width: 0px;
outline-1	outline-width: 1px;
outline-2	outline-width: 2px;
outline-4	outline-width: 4px;
outline-8	outline-width: 8px;

Tailwind CSS 輪廓寬度類的功能

outline-0: 完全移除輪廓。
outline-1: 將輪廓設定為 1 畫素。
outline-2: 將輪廓設定為 2 畫素。
outline-4: 將輪廓設定為 4 畫素。
outline-8: 將輪廓設定為 8 畫素。

Tailwind CSS 輪廓寬度類示例

以下是 Tailwind CSS 輪廓寬度類的示例，展示瞭如何輕鬆調整元素周圍輪廓的粗細。

設定輪廓寬度

此示例演示瞭如何使用 Tailwind CSS 類應用不同的輪廓寬度。輪廓應用於邊框外部，其寬度可以使用 **outline-*** 類進行調整。它不影響佈局或元素佔據的空間。

示例

<!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 Width
    </h2>
    <div class="space-y-4">
        <p class="border border-black outline-offset-2 outline-0 p-4">
            Black border with no outline.
        </p> 
        <p class="border border-black outline outline-offset-2 
            outline-2 outline-green-500 p-4">
            Black border with a 2px green outline.
        </p>
        <p class="border border-black outline outline-offset-2 
            outline-4 outline-blue-500 p-4">
            Black border with a 4px yellow outline.
        </p>
        <p class="border border-black outline outline-offset-2 
            outline-8 outline-red-500 p-4">
            Black border with an 8px red outline.
        </p>
    </div>
</body>

</html>

帶有懸停顏色變化的輪廓寬度

此示例顯示具有不同輪廓寬度和顏色的容器。預設情況下，每個容器都具有特定的輪廓顏色和寬度。當您將滑鼠懸停在它們上面時，輪廓顏色會變暗，提供視覺突出顯示效果。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Outline Width
    </h2>
    <h3 class="text-xl font-semibold mb-4">
        Applying hover effects to outline widths:
    </h3>
    <div class="space-y-6">
        <p class="border-2 border-black outline outline-2 outline-offset-2 
            outline-red-600 p-4 hover:outline-blue-700 hover:outline-4">
            Default: 2px red outline; On hover: 4px blue outline.
        </p> 
        <p class="border-2 border-black outline outline-1 outline-offset-2 
            p-4 outline-green-500 hover:outline-cyan-500 hover:outline-8">
            Default: 1px  green  outline; On hover: 8px cyan outline.
        </p>  
    </div>
</body>

</html>

列印頁面