Tailwind CSS - Outline Style

Tailwind CSS Outline Style 轮廓样式是预定义的类，可让您轻松为元素轮廓设置不同的样式，包括实线、虚线或点线。

Tailwind CSS Outline Style 类

以下是控制元素轮廓外观的 Tailwind CSS Outline Style 轮廓样式类列表。

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>