text-decoration-style
用于控制文本装饰样式的工具。
快速参考
| 类别 | 样式 |
|---|---|
| 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; |
示例
基本示例
使用 decoration-dotted 和 decoration-dashed 等工具来改变元素的 文本装饰 样式：
decoration-solid
The quick brown fox jumps over the lazy dog.
decoration-double
The quick brown fox jumps over the lazy dog.
decoration-dotted
The quick brown fox jumps over the lazy dog.
decoration-dashed
The quick brown fox jumps over the lazy dog.
decoration-wavy
The quick brown fox jumps over the lazy dog.
<p class="underline decoration-solid">The quick brown fox...</p>
<p class="underline decoration-double">The quick brown fox...</p>
<p class="underline decoration-dotted">The quick brown fox...</p>
<p class="underline decoration-dashed">The quick brown fox...</p>
<p class="underline decoration-wavy">The quick brown fox...</p>
响应式设计
在 text-decoration-style 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：
<p class="underline md:decoration-dashed ...">
Lorem ipsum dolor sit amet...
</p>
在 变体文档 中了解更多关于使用变体的信息。