跳到主要内容

Shadow 阴影

在界面中,我们常用阴影来模拟元素之间的物理层级关系。

清晰自然的阴影能帮助用户快速理解界面中元素的空间关系,更清楚的理解整理界面内容。


阴影类型

不同的阴影高度可以代表不同的元素层级,我们定义了四层基础的阴影高度,以适配页面中常用的元素层级。

Example
Token
Value
Usage
--shadow-z1001px 0px 8px 0 rgba(0, 0, 0, 0.05)全局左侧导航的阴影值
--shadow-z2000px 4px 10px 0 rgba(0, 0, 0, 0.1)悬停、点击状态
--shadow-z3000px 4px 20px 0 rgba(0, 0, 0, 0.1)下拉选择
--shadow-z400-8px 0px 20px 0 rgba(0, 0, 0, 0.1)侧拉弹窗阴影值