1. 排版
  2. text-decoration-color

排版

text-decoration-color

用于控制文本装饰颜色的工具。

样式
decoration-inherit
text-decoration-color: inherit;
decoration-current
text-decoration-color: currentColor;
decoration-transparent
text-decoration-color: transparent;
decoration-black
text-decoration-color: var(--color-black); /* #000 */
decoration-white
text-decoration-color: var(--color-white); /* #fff */
decoration-red-50
text-decoration-color: var(--color-red-50); /* oklch(0.971 0.013 17.38) */
decoration-red-100
text-decoration-color: var(--color-red-100); /* oklch(0.936 0.032 17.717) */
decoration-red-200
text-decoration-color: var(--color-red-200); /* oklch(0.885 0.062 18.334) */
decoration-red-300
text-decoration-color: var(--color-red-300); /* oklch(0.808 0.114 19.571) */
decoration-red-400
text-decoration-color: var(--color-red-400); /* oklch(0.704 0.191 22.216) */

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 decoration-sky-500decoration-pink-500 等工具更改元素的 文本修饰 颜色:

¥Use utilities like decoration-sky-500 and decoration-pink-500 to change the text decoration color of an element:

I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

<p>
I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings
at <a class="underline decoration-sky-500">My Company, Inc</a>. Outside
of work, I like to <a class="underline decoration-pink-500">watch pod-racing</a>
and have <a class="underline decoration-indigo-500">light-saber</a> fights.
</p>

改变透明度(Changing the opacity)

¥Changing the opacity

使用颜色透明度修饰符来控制元素的文本装饰颜色透明度:

¥Use the color opacity modifier to control the text decoration color opacity of an element:

I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

<p>
I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings
at <a class="underline decoration-sky-500/30">My Company, Inc</a>. Outside
of work, I like to <a class="underline decoration-pink-500/30">watch pod-racing</a>
and have <a class="underline decoration-indigo-500/30">light-saber</a> fights.
</p>

使用自定义值(Using a custom value)

¥Using a custom value

使用 decoration-[<value>] 语法 根据完全自定义的值设置 text decoration color

<p class="decoration-[#50d71e] ...">
<!-- ... -->
</p>

对于 CSS 变量,还可以使用 decoration-(<custom-property>) 语法:

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

这只是简写,用于 decoration-[var(<custom-property>)] 它会自动为你添加 var() 函数。

悬停时应用(Applying on hover)

¥Applying on hover

text-decoration-color 工具前面加上一个变体,例如 hover:*,以便仅在该状态下应用该工具:

悬停在文本上以查看预期行为

The quick brown fox jumps over the lazy dog.
<p>The <a href="..." class="underline hover:decoration-pink-500 ...">quick brown fox</a> jumps over the lazy dog.</p>

请参阅 变体文档 详细了解如何使用变体。

响应式设计(Responsive design)

¥Responsive design

text-decoration-color 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

<p class="underline decoration-sky-600 md:decoration-blue-400 ...">
<!-- ... -->
</p>

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --color-* 主题变量来自定义项目中的 color 工具:

@theme {
--color-regal-blue: #243c5a;
}

现在 decoration-regal-blue 工具可用于你的标记:

<p class="decoration-regal-blue">
<!-- ... -->
</p>

在此详细了解如何自定义主题: 主题文档

TailwindCSS v4.0 中文网 - 粤ICP备13048890号