Tailwind CSS - 文本装饰样式

Tailwind CSS **文本装饰**样式是一个实用程序类，它提供了简单的方法来添加或删除网页上文本元素的文本装饰样式。

Tailwind CSS 文本装饰样式类

下面列出了 Tailwind CSS 文本装饰样式类，以及启用各种文本装饰样式的属性。

类	CSS 属性
decoration-solid	text-decoration-style: solid;
decoration-double	text-decoration-style: double;
decoration-dotted	text-decoration-style: dotted;
decoration-dashed	text-decoration-style: dashed;
decoration-wavy	text-decoration-style: wavy;

Tailwind CSS 文本装饰样式类的功能

**decoration-solid:** 此类在文本下方应用实线。
**decoration-double:** 此类对文本应用双线下划线。
**decoration-dotted:** 此类用一系列点装饰文本。
**decoration-dashed:** 此类在文本下方应用虚线。
**decoration-wavy:** 此类对文本应用波浪形下划线。

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">
    <h1 class="text-3xl font-bold mb-6">
        Tailwind CSS  Text Decoration Style
    </h1> 
   
    <p class="underline decoration-solid mb-4 text-lg">
         Text with solid line underneath.
    </p>
    
    <p class="underline decoration-double  mb-4 text-lg">
        Text with double underline.
    </p>
    
    <p class="underline decoration-dotted mb-4 text-lg">
        Text with dotted underline.
    </p>
    
    <p class="underline decoration-dashed mb-4 text-lg">
        Text with dashed underline.
    </p>
    
    <p class="underline decoration-wavy text-lg">
        Text with wavy underline.
    </p> 
</body>

</html>

悬停时的条件文本装饰样式

此示例显示了使用修饰符有条件地应用 Tailwind CSS 文本装饰样式类以控制不同状态。例如，'hover:underline' 在悬停时对文本应用下划线。

示例

Open Compiler

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

<body class="p-4">
    <h1 class="text-3xl font-bold mb-6 hover:no-underline">
        Tailwind CSS  Text Decoration Style
    </h1> 
    <h2 class="text-2xl mb-4">Hover to toggle line</h2>
    <p class="underline decoration-solid 
              mb-4 text-lg hover:no-underline">
         Text with solid line underneath.
    </p>    
    <p class="underline decoration-double  
              mb-4 text-lg hover:no-underline">
        Text with double underline.
    </p>    
    <p class="underline decoration-dotted 
              mb-4 text-lg hover:no-underline">
        Text with dotted underline.
    </p>
    <p class="underline decoration-dashed  
              mb-4 text-lg hover:no-underline">
        Text with dashed underline.
    </p>    
    <p class="underline decoration-wavy-on-hover 
              text-lg hover:no-underline">
        Text with wavy underline.
    </p> 
</body>

</html>

打印页面