阴影Shadow
样式与布局基础用投影表现前后层级和悬浮关系
阴影可以让弹窗、菜单和卡片看起来位于其他内容上方。层级越高不代表阴影一定越重；偏移、模糊和透明度要一起调整，并避免多个深阴影让页面显得混乱。
浅中浮起
什么时候用
- 卡片 Card 悬停浮起：浅阴影提示可点→
- 选择器 Select 下拉、文字提示 Tooltip 浮层边缘：和页面区分开全部状态全部状态进行中已完成已过期
- 内阴影做凹陷：输入框、进度槽往里凹内阴影做出「凹进去」的槽
什么时候不用
- 阴影又黑又实，像给元素贴了块膏药
- 每个元素都加阴影：全都浮着等于没有层级
- 阴影方向上下左右乱飞：全站统一光源
- 给正文文字加投影提高存在感：只会更糊正文加了投影
组成结构 · Anatomy
卡片☀
1元素本体Element投下阴影的那个盒子
2阴影Shadowx / y 偏移 + 模糊 + 扩散，颜色带透明度
3光源Light全站统一一个方向，阴影才不乱
常见变体 · Variants
浅阴影Small
卡片
普通卡片的默认层次
中阴影Medium
浮起
悬停浮起、下拉菜单
浮起阴影Large
弹窗
弹窗、抽屉这类最上层
内阴影Inset
凹槽
输入框、进度槽做凹陷感
典型使用场景
卡片悬停浮起
设计规范.md
昨天 18:02 更新
默认 · 几乎无阴影
首页改版.fig
2 小时前更新
悬停 · 阴影加深浮起
弹窗与抽屉
下拉浮层
按最近更新排序
凹陷的进度槽
存储空间7.2 / 10 GB
槽用 inset 内阴影凹进去，填充条才像嵌在里面