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 ...">订阅</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 等工具类为元素添加内阴影效果：

<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 ...">订阅</button><button class="ring-2 ring-blue-500/50 ...">订阅</button>

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

添加内嵌边框

使用 inset-ring 或 inset-ring-<number> 工具类（如 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 等工具类来改变内嵌边框的颜色：

<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 工具类来移除元素上现有的盒阴影：

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