ZUI 3

Appearance

阴影 ​

阴影配置 ​

阴影能让界面元素更加具有层次感，在 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 变量。下面为一个例子：

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;
}

自定义主题 ​

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