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: 在元素周围添加双线轮廓。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 轮廓样式类示例

以下是 Tailwind CSS 轮廓样式类的示例，显示了元素的不同轮廓样式，如实线、虚线和点线。

应用轮廓样式

此示例演示了如何使用 Tailwind CSS 轮廓样式类将不同的样式应用于 HTML 元素周围的轮廓。每个类都显示不同的样式，例如实线、虚线或点线轮廓。

示例

Open Compiler

<!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 轮廓样式类在悬停时动态更改元素的轮廓样式。

示例

Open Compiler

<!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>

打印页面