Shadow 阴影
在界面中，我们常用阴影来模拟元素之间的物理层级关系。清晰自然的阴影能帮助用户快速理解界面中元素的空间关系，更清楚的理解整理界面内容。
阴影类型
不同的阴影高度可以代表不同的元素层级，我们定义了四层基础的阴影高度，以适配页面中常用的元素层级。
| Example | Token | Value | Usage |
|---|---|---|---|
--shadow-z100 | 0 0px 1px 0 rgba(37, 45, 55, 0.08) | 平面卡片。 如：边框等。 | |
--shadow-z200 | 0 2px 4px 0 rgba(37, 45, 55, 0.08) | 物体位于低层级，此时物体被操作(悬停、点击等)触发为悬浮状态，当操作完成或取消时，悬停状态反馈也跟随消失，物体回归到原有的层级中。 如：卡片 hover、等。 | |
--shadow-z300 | 0 4px 8px 0 rgba(37, 45, 55, 0.08) | 物体位于中层级，此时物体与基准面的关系是展开并跟随，物体由地面上的元素展开产生，会跟随元素所在层级的移动而移动。 如：下拉面板、浮动卡片等。 | |
--shadow-z400 | 0 8px 16px 0 rgba(37, 45, 55, 0.08) | 物体位于高层级，该物体的运动和其他层级没有关联。 如：对话框等。 |