box-shadow

示例

基本示例

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

<!-- [!code 类名:shadow-md,shadow-lg,shadow-xl] --><div class="shadow-md ..."></div><div class="shadow-lg ..."></div><div class="shadow-xl ..."></div>

更改不透明度

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

<!-- [!code 类名:shadow-xl,shadow-xl/20,shadow-xl/30] --><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 这样的工具类更改盒阴影的颜色：

<!-- [!code 类名:shadow-cyan-500/50,shadow-blue-500/50,shadow-indigo-500/50] --><button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">订阅</button><button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">订阅</button><button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">订阅</button>

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

添加内阴影

使用像 inset-shadow-xs 和 inset-shadow-sm 这样的工具类为元素应用内阴影：

<!-- [!code 类名:inset-shadow-2xs,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 这样的工具类更改内阴影的颜色：

<!-- [!code 类名:inset-shadow-indigo-500,inset-shadow-indigo-500/75] --><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，为元素应用实心盒阴影：

<!-- [!code 类名:ring,ring-2,ring-4] --><button class="ring ...">订阅</button><button class="ring-2 ...">订阅</button><button class="ring-4 ...">订阅</button>

默认情况下，边框阴影会与应用它们的元素的 currentColor 颜色匹配。

设置边框阴影颜色

使用像 ring-indigo-500 和 ring-cyan-500/50 这样的工具类来改变边框阴影的颜色：

<!-- [!code 类名:ring-blue-500,ring-blue-500/50] --><button class="ring-2 ring-blue-500 ...">订阅</button><button class="ring-2 ring-blue-500/50 ...">订阅</button>

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

添加内边框阴影

使用 inset-ring 或 inset-ring-<number> 工具类，例如 inset-ring-2 和 inset-ring-4 为元素应用实心内边框阴影：

<!-- [!code 类名:inset-ring,inset-ring-2,inset-ring-4] --><button class="inset-ring ...">订阅</button><button class="inset-ring-2 ...">订阅</button><button class="inset-ring-4 ...">订阅</button>

默认情况下，内边框阴影会与应用它们的元素的 currentColor 颜色匹配。

设置内边框阴影颜色

使用像 inset-ring-indigo-500 和 inset-ring-cyan-500/50 这样的工具类更改内边框阴影的颜色：

<!-- [!code 类名:inset-ring-blue-500,inset-ring-blue-500/50] --><button class="inset-ring-2 inset-ring-blue-500 ...">订阅</button><button class="inset-ring-2 inset-ring-blue-500/50 ...">订阅</button>

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

移除盒阴影

使用 shadow-none、inset-shadow-none、ring-0 以及 inset-ring-0 工具类从元素上移除已有的盒阴影：

<!-- [!code 类名:shadow-none] --><div class="shadow-none ..."></div>

使用自定义值

Use utilities like shadow-[<value>],inset-shadow-[<value>],ring-[<value>], and inset-ring-[<value>] to set the 盒阴影 based on a completely custom value:

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

For CSS variables, you can also use the shadow-(<custom-property>) syntax:

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

This is just a shorthand for shadow-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix a box-shadow utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

自定义主题

自定义阴影

Use the --shadow-* theme variables to customize the 盒阴影 utilities in your project:

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

Now the shadow-3xl utility can be used in your markup:

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

Learn more about customizing your theme in the theme documentation.

自定义内阴影

Use the --inset-shadow-* theme variables to customize the 内盒阴影 utilities in your project:

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

Now the inset-shadow-md utility can be used in your markup:

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

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 utilities like shadow-regal-blue,inset-shadow-regal-blue,ring-regal-blue, and inset-ring-regal-blue can be used in your markup:

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

Learn more about customizing your theme in the theme documentation.