text-shadow

示例

基础示例

使用 text-shadow-sm 和 shadow-lg 等工具类为文本元素应用不同大小的文字阴影：

<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>

调整透明度

使用透明度修饰符来调整文字阴影的透明度：

<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-500 和 text-shadow-cyan-500/50 等工具类来改变文字阴影的颜色：

<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">预约演示</button><button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">查看价格</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.