阴影效果

示例

基本示例

使用类似 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() 函数。

响应式设计

前缀一个 box-shadow 工具类 带有断点变体，例如 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-* 主题变量来自定义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>

在

主题文档