box-shadow

示例

基本示例

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

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

设置阴影颜色

使用 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-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 ...">订阅</button>
<button class="ring-2 ...">订阅</button>
<button class="ring-4 ...">订阅</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.