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

使用自定义值

Use utilities like shadow-[<value>],inset-shadow-[<value>],ring-[<value>], and inset-ring-[<value>] to set the box shadow 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 box shadow 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 inset box shadow 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.