阴影

阴影配置

阴影能让界面元素更加具有层次感，在 ZUI 中预设了一系列的阴影，具体如下：

预览

阴影名称

CSS 变量名

box-shadow 实际值

.shadow-inner

内部阴影

--shadow-inner

--shadow-inner

box-shadow

.shadow-none

无阴影

--shadow-none

--shadow-none

box-shadow

.shadow-sm

小阴影

--shadow-sm

--shadow-sm

box-shadow

.shadow

默认阴影

--shadow

--shadow

box-shadow

.shadow-md

中等阴影

--shadow-md

--shadow-md

box-shadow

.shadow-lg

大阴影

--shadow-lg

--shadow-lg

box-shadow

.shadow-xl

超大阴影

--shadow-xl

--shadow-xl

box-shadow

.shadow-2xl

2x 超大阴影

--shadow-2xl

--shadow-2xl

box-shadow

使用阴影

通过 CSS 工具类

在 ZUI 中可以通过 CSS 工具类来设置阴影，详细用法参加 CSS 工具类 / 效果 / 盒阴影 文档。下面为一个简单的例子：

小阴影

大阴影

通过 CSS 变量

你可以直接在 CSS 中引用阴影相关的 CSS 变量来使用阴影，例如：

小阴影

大阴影

自定义阴影

通过修改阴影配置可以快速改变界面风格，例如在一个简单清晰的风格下，你可能需要移除所有阴影设置。在 ZUI 中提供了多种方式来自定义阴影配置。

覆盖 CSS 变量

最方便自定义阴影的方式是覆盖 CSS 变量。下面为一个例子：

:root {
  --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:       0 1px 4px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:    0 2px 8px -1px rgb(0 0 0 / 0.1), 0 1px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:    0 4px 16px -4px rgb(0 0 0 / 0.1), 0 2px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:    0 6px 32px -6px rgb(0 0 0 / 0.15), 0 4px 10px -6px rgb(0 0 0 / 0.15);
  --shadow-2xl:   0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none:  none;
}

自定义主题

可以通过定制主题来修改阴影设置，具体参见 主题 文档。