前端

阴影Shadow

你可能会说

给卡片下面加一层淡淡的投影，让它像浮在页面上。

模拟光影投射效果以构建界面元素悬浮感与视觉层级深度的样式属性。弹窗、浮动菜单和需要与背景分开的卡片可以用 box-shadow；前两个值控制 x / y 偏移，后面可设置模糊、扩散和颜色。阴影只能辅助表达层级，浅色界面应保持轻微且方向一致；给每张卡片都加重阴影会让页面显得杂乱。

也常被叫作阴影盒阴影投影box-shadow

浅中浮起

组成结构 · Anatomy

卡片☀

投下阴影的那个盒子

x / y 偏移 + 模糊 + 扩散，颜色带透明度

全站统一一个方向，阴影才不乱

常见变体 · Variants

浅阴影Small

卡片

普通卡片的默认层次

中阴影Medium

浮起

悬停浮起、下拉菜单

浮起阴影Large

弹窗

弹窗、抽屉这类最上层

内阴影Inset

凹槽

输入框、进度槽做凹陷感

典型使用场景

卡片悬停浮起

设计规范.md

昨天 18:02 更新

默认 · 几乎无阴影

首页改版.fig

2 小时前更新

悬停 · 阴影加深浮起

弹窗与抽屉

大阴影 = 最上层 发布新版本？

下拉浮层

按最近更新排序

浮层阴影