Tailwind CSS - 輪廓樣式

Tailwind CSS 輪廓樣式是預定義的類，允許您輕鬆設定元素輪廓的不同樣式，包括實線、虛線或點線。

Tailwind CSS 輪廓樣式類

以下是控制元素輪廓外觀的 Tailwind CSS 輪廓樣式類的列表。

類	CSS 屬性
outline-none	outline: 2px solid transparent; outline-offset: 2px;
outline	outline-style: solid;
outline-dashed	outline-style: dashed;
outline-dotted	outline-style: dotted;
outline-double	outline-style: double;

Tailwind CSS 輪廓樣式類的功能

outline-none: 從元素中移除輪廓。
outline: 在元素周圍新增實線輪廓。
outline-dashed: 在元素周圍新增虛線輪廓。
outline-dotted: 在元素周圍新增點線輪廓。
outline-double: 在元素周圍新增雙線輪廓。

Tailwind CSS 輪廓樣式類示例

以下是 Tailwind CSS 輪廓樣式類的示例，顯示了元素的不同輪廓樣式，如實線、虛線和點線。

應用輪廓樣式

此示例演示瞭如何使用 Tailwind CSS 輪廓樣式類將不同的樣式應用於 HTML 元素周圍的輪廓。每個類都顯示不同的樣式，例如實線、虛線或點線輪廓。

示例

<!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 Styles
    </h2>
    <div class="grid grid-cols-3 gap-6">
         <p class="outline-none outline-4 
            outline-purple-400 border border-black p-4">
            None outline
        </p>
        <p class="outline-solid outline-4 outline-offset-2 
            outline-rose-500 border border-black p-2">
            Solid outline
        </p>
        <p class="outline-dashed outline-4 outline-offset-2 
            outline-red-700 border border-black p-1">
            Dashed outline 
        </p>
        <p class="outline-dotted outline-4 outline-offset-2 
            outline-pink-800 border border-black p-4 ">
            Dotted outline  
        </p>
        <p class="border border-black outline-double 
            outline-4 outline-offset-2 outline-cyan-500 p-4">
            Double outline
        </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 Outline Styles
    </h2>
    <p class="underline mb-4">
        Hover over the boxes to see how 
        the outline styles change.
    </p> 
    <div class="outline outline-solid outline-offset-2 p-4 border 
        border-black mb-4 hover:outline-dashed hover:outline-red-600">
        Solid Outline - Hover: Dashed Red
    </div> 
    <div class="outline outline-dotted p-4 border border-black mb-4 
        hover:outline-double hover:outline-blue-700">
        Dotted Outline - Hover: Double Blue
    </div> 
    <div class="outline outline-double outline-offset-2 p-4 border 
        border-black hover:outline-none">
        Double Outline - Hover: No Outline
    </div>
</body>

</html>

列印頁面