Tailwind CSS - Text Decoration Style
Tailwind CSS Text Decoration Style 是一个实用类，它提供了在网页文本元素中添加或删除文本装饰样式的简便方法。
Tailwind CSS Text Decoration Style 类
以下是 Tailwind CSS Text Decoration Style 类的列表，这些类的属性可用于启用各种文本装饰样式。
| 类 | 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 此类在文本上应用波浪下划线。
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">
<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"会在鼠标悬停时为文本添加下划线。
示例
<!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>
