box-shadow

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use utilities like shadow-sm and shadow-lg to apply different sized outer box shadows to an element:

<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
<div class="shadow-xl ..."></div>

改变透明度(Changing the opacity)

¥Changing the opacity

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

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

<div class="shadow-xl ..."></div>
<div class="shadow-xl/20 ..."></div>
<div class="shadow-xl/30 ..."></div>

默认的盒阴影透明度非常低（25% 或更低），因此增加透明度（例如 50%）会使盒阴影更加明显。

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

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

¥Setting the shadow color

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

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

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>

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

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

添加插入阴影(Adding an inset shadow)

¥Adding an inset shadow

使用 inset-shadow-xs 和 inset-shadow-sm 等工具将插入框阴影应用于元素：

¥Use utilities like inset-shadow-xs and inset-shadow-sm to apply an inset box shadow to an element:

<div class="inset-shadow-2xs ..."></div>
<div class="inset-shadow-xs ..."></div>
<div class="inset-shadow-sm ..."></div>

你可以使用透明度修饰符调整插入阴影的透明度，例如 inset-shadow-sm/50。默认插入阴影透明度相当低（5%），因此增加透明度（例如 50%）会使插入阴影更加明显。

¥You can adjust the opacity of an inset shadow using the opacity modifier, like inset-shadow-sm/50. The default inset shadow opacities are quite low (5%), so increasing the opacity (to like 50%) will make the inset shadows more pronounced.

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

¥Setting the inset shadow color

使用 inset-shadow-indigo-500 和 inset-shadow-cyan-500/50 等工具更改插入框阴影的颜色：

¥Use utilities like inset-shadow-indigo-500 and inset-shadow-cyan-500/50 to change the color of an inset box shadow:

<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div>
<div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>

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

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

添加戒指(Adding a ring)

¥Adding a ring

使用 ring 或 ring-<number> 工具（如 ring-2 和 ring-4）将实心框阴影应用于元素：

¥Use ring or ring-<number> utilities like ring-2 and ring-4 to apply a solid box-shadow to an element:

<button class="ring ...">Subscribe</button>
<button class="ring-2 ...">Subscribe</button>
<button class="ring-4 ...">Subscribe</button>

默认情况下，环与应用它们的元素的 currentColor 相匹配。

¥By default rings match the currentColor of the element they are applied to.

设置环颜色(Setting the ring color)

¥Setting the ring color

使用 ring-indigo-500 和 ring-cyan-500/50 等工具更改环的颜色：

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

<button class="ring-2 ring-blue-500 ...">Subscribe</button>
<button class="ring-2 ring-blue-500/50 ...">Subscribe</button>

默认情况下，环的透明度为 100%，但你可以使用透明度修饰符进行调整。

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

添加插入环(Adding an inset ring)

¥Adding an inset ring

使用 inset-ring 或 inset-ring-<number> 工具（如 inset-ring-2 和 inset-ring-4）将实心插入框阴影应用于元素：

¥Use inset-ring or inset-ring-<number> utilities like inset-ring-2 and inset-ring-4 to apply a solid inset box-shadow to an element:

<button class="inset-ring ...">Subscribe</button>
<button class="inset-ring-2 ...">Subscribe</button>
<button class="inset-ring-4 ...">Subscribe</button>

默认情况下，插入环与应用它们的元素的 currentColor 相匹配。

¥By default inset rings match the currentColor of the element they are applied to.

设置插入环颜色(Setting the inset ring color)

¥Setting the inset ring color

使用 inset-ring-indigo-500 和 inset-ring-cyan-500/50 等工具更改插入环的颜色：

¥Use utilities like inset-ring-indigo-500 and inset-ring-cyan-500/50 to change the color of an inset ring:

<button class="inset-ring-2 inset-ring-blue-500 ...">Subscribe</button>
<button class="inset-ring-2 inset-ring-blue-500/50 ...">Subscribe</button>

默认情况下，插入环的透明度为 100%，但你可以使用透明度修饰符进行调整。

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

删除框阴影(Removing a box shadow)

¥Removing a box shadow

使用 shadow-none、inset-shadow-none、ring-0 和 inset-ring-0 工具从元素中删除现有的框阴影：

¥Use the shadow-none, inset-shadow-none,ring-0, and inset-ring-0 utilities to remove an existing box shadow from an element:

<div class="shadow-none ..."></div>

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

¥Using a custom value

使用工具例如 shadow-[<value>],inset-shadow-[<value>],ring-[<value>], and inset-ring-[<value>] 根据完全自定义的值设置 box shadow：

<div class="shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...">
  <!-- ... -->
</div>

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

<div class="shadow-(--my-shadow) ...">
  <!-- ... -->
</div>

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

响应式设计(Responsive design)

¥Responsive design

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

<div class="shadow-none md:shadow-lg ...">
  <!-- ... -->
</div>

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

自定义主题(Customizing your theme)

¥Customizing your theme

自定义阴影(Customizing shadows)

¥Customizing shadows

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

@theme {
  --shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); 
}

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

<div class="shadow-3xl">
  <!-- ... -->
</div>

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

自定义插入阴影(Customizing inset shadows)

¥Customizing inset shadows

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

@theme {
  --inset-shadow-md: inset 0 2px 3px rgba(0, 0, 0, 0.25); 
}

现在 inset-shadow-md 工具可用于你的标记：

<div class="inset-shadow-md">
  <!-- ... -->
</div>

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

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