box-shadow

快速参考

(省略)

示例

基本示例

使用 shadow-sm 和 shadow-lg 等工具类为元素应用不同大小的外部盒阴影：

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

改变不透明度

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

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

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

设置阴影颜色

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

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

添加内嵌阴影

使用 inset-shadow-xs 和 inset-shadow-sm 等工具类为元素应用内嵌盒阴影：

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

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

设置内嵌阴影颜色

使用 inset-shadow-indigo-500 和 inset-shadow-cyan-500/50 等工具类改变内嵌盒阴影的颜色：

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

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

添加光环

使用 ring 或 ring-<number> 工具类（例如 ring-2 和 ring-4）为元素应用实心盒阴影（光环）：

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

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

设置光环颜色

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

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

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

添加内嵌光环

使用 inset-ring 或 inset-ring-<number> 工具类（例如 inset-ring-2 和 inset-ring-4）为元素应用实心内嵌盒阴影（内嵌光环）：

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

默认情况下，内嵌光环与它们所应用的元素的 currentColor 匹配。

设置内嵌光环颜色

使用 inset-ring-indigo-500 和 inset-ring-cyan-500/50 等工具类改变内嵌光环的颜色：

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

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

移除盒阴影

使用 shadow-none、inset-shadow-none、ring-0 和 inset-ring-0 工具类从元素中移除现有盒阴影：

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

使用自定义值

使用 shadow-[<value>]、inset-shadow-[<value>]、ring-[<value>] 和 inset-ring-[<value>] 等工具类设置基于完全自定义值的盒阴影：

<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() 函数。

响应式设计

为盒阴影工具类添加 md: 等断点变体前缀，以仅在中等屏幕尺寸及以上应用该工具类：

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

在 变体文档 中了解更多关于使用变体的信息。

自定义你的主题

自定义阴影

使用 --shadow-* 主题变量自定义项目中的盒阴影工具类：

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

现在 shadow-3xl 工具类可以在你的标记中使用了：

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

在 主题文档 中了解更多关于自定义主题的信息。

自定义内嵌阴影

使用 --inset-shadow-* 主题变量自定义项目中的内嵌盒阴影工具类：

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

现在 inset-shadow-md 工具类可以在你的标记中使用了：

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

在 主题文档 中了解更多关于自定义主题的信息。

自定义阴影颜色

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

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

现在 shadow-regal-blue、inset-shadow-regal-blue、ring-regal-blue 和 inset-ring-regal-blue 等工具类可以在你的标记中使用了：

<div class="shadow-regal-blue">
  <!-- ... -->
</div>

在 主题文档 中了解更多关于自定义主题的信息。