1. 效果
  2. box-shadow

效果

box-shadow

用于控制元素阴影的实用工具。

样式
shadow-2xs
box-shadow: var(--shadow-2xs); /* 0 1px rgb(0 0 0 / 0.05) */
shadow-xs
box-shadow: var(--shadow-xs); /* 0 1px 2px 0 rgb(0 0 0 / 0.05) */
shadow-sm
box-shadow: var(--shadow-sm); /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */
shadow-md
box-shadow: var(--shadow-md); /* 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */
shadow-lg
box-shadow: var(--shadow-lg); /* 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */
shadow-xl
box-shadow: var(--shadow-xl); /* 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */
shadow-2xl
box-shadow: var(--shadow-2xl); /* 0 25px 50px -12px rgb(0 0 0 / 0.25) */
shadow-none
box-shadow: 0 0 #0000;
shadow-(<自定义属性>)
box-shadow: var(<自定义属性>);
shadow-(color:<自定义属性>)
--tw-shadow-color var(<自定义属性>);

示例

基本示例

使用诸如 shadow-smshadow-lg 之类的实用工具,为元素应用不同大小的外部阴影

shadow-md

shadow-lg

shadow-xl

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

设置阴影颜色

使用诸如 shadow-indigo-500shadow-cyan-500/50 之类的实用工具来更改框阴影的颜色

shadow-cyan-500/50

shadow-blue-500/50

shadow-indigo-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-xsinset-shadow-sm 之类的实用工具,为元素应用内阴影

内阴影-2xs

内阴影-xs

内阴影-sm

<div class="inset-shadow-2xs ..."></div><div class="inset-shadow-xs ..."></div><div class="inset-shadow-sm ..."></div>

这些实用工具对于表单控件或井等元素很有用。

设置内阴影颜色

使用诸如 inset-shadow-indigo-500inset-shadow-cyan-500/50 之类的实用工具来更改内阴影的颜色

内阴影-靛蓝色-500

inset-shadow-indigo-500/50

<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div><div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>

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

添加环形

使用 ringring-<number> 实用工具(如 ring-2ring-4)为元素应用实线框阴影

描边

ring-2

ring-4

<button class="ring ...">Subscribe</button><button class="ring-2 ...">Subscribe</button><button class="ring-4 ...">Subscribe</button>

默认情况下,环形与应用它们的元素的 currentColor 匹配。

设置环形颜色

使用诸如 ring-indigo-500ring-cyan-500/50 之类的实用工具来更改环形的颜色

ring-blue-500

ring-blue-500/50

<button class="ring-2 ring-blue-500 ...">Subscribe</button><button class="ring-2 ring-blue-500/50 ...">Subscribe</button>

默认情况下,环形的不透明度为 100%,但您可以使用不透明度修饰符进行调整。

添加内环形

使用 inset-ringinset-ring-<number> 实用工具(如 inset-ring-2inset-ring-4)为元素应用实线内框阴影

inset-ring

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-500inset-ring-cyan-500/50 之类的实用工具来更改内环形的颜色

inset-ring-blue-500

inset-ring-blue-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-noneinset-shadow-nonering-0inset-ring-0 实用工具从元素中删除现有的框阴影

shadow-none

<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 实用工具可以在您的标记中使用

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

主题文档.

md

自定义阴影颜色color 您项目中的实用工具

@theme {  --color-regal-blue: #243c5a; }

使用 --color-* 主题变量自定义 现在可以使用诸如shadow-regal-blueinset-shadow-regal-bluering-regal-blueinset-ring-regal-blue

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

主题文档.

之类的实用工具在您的标记中使用
X