text-shadow

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use utilities like text-shadow-sm and shadow-lg to apply different sized text shadows to a text element:

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

改变透明度(Changing the opacity)

¥Changing the opacity

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

¥Use the opacity modifier to adjust the opacity of the text shadow:

<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%）会使文本阴影更加明显。

¥The default text shadow opacities are quite low (20% or less), so increasing the opacity (to like 50%) will make the text shadows more pronounced.

设置阴影颜色(Setting the shadow color)

¥Setting the shadow color

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

¥Use utilities like text-shadow-indigo-500 and text-shadow-cyan-500/50 to change the color of a text shadow:

<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%，但你可以使用透明度修饰符进行调整。

¥By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.

移除文本阴影(Removing a text shadow)

¥Removing a text shadow

使用 text-shadow-none 工具移除元素中现有的文本阴影：

¥Use the text-shadow-none utility to remove an existing text shadow from an element:

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

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

¥Using a custom value

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

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

对于 CSS 变量，还可以使用 text-shadow-(<custom-property>) 语法：

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

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

响应式设计(Responsive design)

¥Responsive design

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

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

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

自定义主题(Customizing your theme)

¥Customizing your theme

自定义文本阴影(Customizing text shadows)

¥Customizing text shadows

使用 --text-shadow-* 主题变量来自定义项目中的 text shadow 工具：

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

现在 text-shadow-xl 工具可用于你的标记：

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

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

自定义阴影颜色(Customizing shadow colors)

¥Customizing shadow colors

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

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

现在 text-shadow-regal-blue 工具可用于你的标记：

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

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