字体排版
forced-color-adjust
用于控制文本装饰厚度的实用工具。 | 类 |
---|---|
样式 | decoration-<number> |
text-decoration-thickness: <number>px; | decoration-from-font |
text-decoration-thickness: from-font; | decoration-auto |
text-decoration-thickness: auto; | decoration-(<自定义属性>) |
text-decoration-thickness: var(<自定义属性>); | decoration-[<值>] |
基本示例
decoration-1
decoration-1
decoration-1
<p class="underline decoration-1">The quick brown fox...</p><p class="underline decoration-2">The quick brown fox...</p><p class="underline decoration-4">The quick brown fox...</p>
使用自定义值 使用decoration
-[<值>] 语法来设置基于完全自定义值的文本装饰厚度
<p class="decoration-[0.25rem] ..."> <!-- ... --></p>
对于 CSS 变量,您还可以使用 使用-(<自定义属性>)
-[<值>]
<p class="decoration-(--my-decoration-thickness) ..."> <!-- ... --></p>
这只是 使用-[var(<自定义属性>)]
的简写形式,它会自动为您添加 var()
函数。
前缀a text-decoration-thickness
实用工具 带有断点变体,如 md:
,仅在中等 屏幕尺寸及以上应用该实用工具
<p class="underline md:decoration-4 ..."> <!-- ... --></p>
在变体文档中了解有关使用变体的更多信息。