1. 效果
  2. text-shadow

效果

文本阴影

用于控制文本元素阴影的工具类。

ClassStyles
text-shadow-2xs
text-shadow: var(--text-shadow-2xs); /* 0px 1px 0px rgb(0 0 0 / 0.15) */
text-shadow-xs
text-shadow: var(--text-shadow-xs); /* 0px 1px 1px rgb(0 0 0 / 0.2) */
text-shadow-sm
text-shadow: var(--text-shadow-sm); /* 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) */
text-shadow-md
text-shadow: var(--text-shadow-md); /* 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) */
text-shadow-lg
text-shadow: var(--text-shadow-lg); /* 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) */
text-shadow-none
text-shadow: none;
text-shadow-(<custom-property>)
text-shadow: var(<custom-property>);
text-shadow-(color:<custom-property>)
--tw-shadow-color var(<custom-property>);
text-shadow-[<value>]
text-shadow: <value>;
text-shadow-inherit
--tw-shadow-color inherit;

示例

基础示例

使用 text-shadow-smshadow-lg 等工具类为文本元素应用不同大小的文本阴影:

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<p class="text-shadow-2xs ...">The quick brown fox...</p><p class="text-shadow-xs ...">The quick brown fox...</p><p class="text-shadow-sm ...">The quick brown fox...</p><p class="text-shadow-md ...">The quick brown fox...</p><p class="text-shadow-lg ...">The quick brown fox...</p>

更改不透明度

使用不透明度修饰符来调整文本阴影的不透明度:

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<p class="text-shadow-lg ...">The quick brown fox...</p><p class="text-shadow-lg/20 ...">The quick brown fox...</p><p class="text-shadow-lg/30 ...">The quick brown fox...</p>

默认的文本阴影不透明度相当低(20% 或更低),所以增加不透明度(如增加到 50%)会使文本阴影更加明显。

设置阴影颜色

使用 text-shadow-indigo-500text-shadow-cyan-500/50 等工具类来更改文本阴影的颜色:

<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Book a demo</button><button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">See pricing</button>

默认情况下,彩色阴影的不透明度为 100%,但你可以使用不透明度修饰符来调整它。

移除文本阴影

使用 text-shadow-none 工具类来移除元素上已存在的文本阴影:

<p class="text-shadow-lg dark:text-shadow-none">  <!-- ... --></p>

使用自定义值

Use the text-shadow-[<value>] syntax to set the 文本阴影 based on a completely custom value:

<p class="text-shadow-[0_35px_35px_rgb(0_0_0_/_0.25)] ...">  Lorem ipsum dolor sit amet...</p>

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

<p class="text-shadow-(--my-text-shadow) ...">  Lorem ipsum dolor sit amet...</p>

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

响应式设计

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

<p class="text-shadow-none md:text-shadow-lg ...">  Lorem ipsum dolor sit amet...</p>

Learn more about using variants in the variants documentation.

自定义主题

自定义文本阴影

Use the --text-shadow-* theme variables to customize the 文本阴影 utilities in your project:

@theme {  --text-shadow-xl: 0 35px 35px rgb(0, 0, 0 / 0.25); }

Now the text-shadow-xl utility can be used in your markup:

<p class="text-shadow-xl">  Lorem ipsum dolor sit amet...</p>

Learn more about customizing your theme in the theme documentation.

自定义阴影颜色

Use the --color-* theme variables to customize the color utilities in your project:

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

Now the text-shadow-regal-blue utility can be used in your markup:

<p class="text-shadow-regal-blue">  Lorem ipsum dolor sit amet...</p>

Learn more about customizing your theme in the theme documentation.

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy