文本装饰厚度

文本装饰厚度

用于控制文本装饰厚度的工具类。

Class Styles

Class	Styles
`decoration-<number>`	`text-decoration-thickness: <number>px;`
`decoration-from-font`	`text-decoration-thickness: from-font;`
`decoration-auto`	`text-decoration-thickness: auto;`
`decoration-(<custom-property>)`	`text-decoration-thickness: var(<custom-property>);`
`decoration-[<value>]`	`text-decoration-thickness: <value>;`

decoration-<number>

text-decoration-thickness: <number>px;

decoration-from-font

text-decoration-thickness: from-font;

decoration-auto

text-decoration-thickness: auto;

decoration-(<custom-property>)

text-decoration-thickness: var(<custom-property>);

decoration-[<value>]

text-decoration-thickness: <value>;

示例

使用 decoration-<number> 工具类，如 decoration-2 和 decoration-4 来改变元素的文本装饰厚度：

decoration-1

快棕色狐狸跃过懒狗。

decoration-2

快棕色狐狸跃过懒狗。

decoration-4

快棕色狐狸跃过懒狗。

<p class="underline decoration-1">快棕色狐狸...</p>
<p class="underline decoration-2">快棕色狐狸...</p>
<p class="underline decoration-4">快棕色狐狸...</p>

Use the decoration-[<value>] syntax to set the 文本装饰厚度 based on a completely custom value:

<p class="decoration-[0.25rem] ...">
  <!-- ... -->
</p>

For CSS variables, you can also use the decoration-(<custom-property>) syntax:

<p class="decoration-(--my-decoration-thickness) ...">
  <!-- ... -->
</p>

This is just a shorthand for decoration-[var(<custom-property>)] that adds the var() function for you automatically.

Prefix a text-decoration-thickness utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="underline md:decoration-4 ...">
  <!-- ... -->
</p>

Learn more about using variants in the variants documentation.