Shadow 阴影
在界面中，我们常用阴影来模拟元素之间的物理层级关系。
清晰自然的阴影能帮助用户快速理解界面中元素的空间关系，更清楚的理解整理界面内容。
阴影类型
不同的阴影高度可以代表不同的元素层级，我们定义了四层基础的阴影高度，以适配页面中常用的元素层级。
| Example | Token | Value | Usage | |
|---|---|---|---|---|
--shadow-z100 | 1px 0px 8px 0 rgba(0, 0, 0, 0.05) | 全局左侧导航的阴影值 | ||
--shadow-z200 | 0px 4px 10px 0 rgba(0, 0, 0, 0.1) | 悬停、点击状态 | ||
--shadow-z300 | 0px 4px 20px 0 rgba(0, 0, 0, 0.1) | 下拉选择 | ||
--shadow-z400 | -8px 0px 20px 0 rgba(0, 0, 0, 0.1) | 侧拉弹窗阴影值 |