阴影Shadow

你可能会说

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

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

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

浅中浮起

选择题选择一个你认为最合适的答案

页面同时有普通卡片、下拉菜单和弹窗，现在每个元素都使用同样浓重的阴影。怎样建立更清楚的层级？

普通内容保持克制，浮层按真实高度增强阴影，并统一光源方向所有卡片和控件继续使用重阴影，让每个元素都从背景中突出给正文文字也加投影，用同一效果补足浅色文字对比度

请建立统一阴影层级：普通卡片尽量平，Dropdown 和 Popover 使用轻阴影，Modal 使用更明确但克制的阴影，方向保持一致。不要给正文加阴影；在浅色和深色背景上分别检查边界。

组成结构 · Anatomy

卡片☀

投下阴影的那个盒子

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

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

常见变体 · Variants

浅阴影Small

卡片

普通卡片的默认层次

中阴影Medium

浮起

悬停浮起、下拉菜单

浮起阴影Large

弹窗

弹窗、抽屉这类最上层

内阴影Inset

凹槽

输入框、进度槽做凹陷感

典型使用场景

卡片悬停浮起

设计规范.md

昨天 18:02 更新

默认 · 几乎无阴影

首页改版.fig

2 小时前更新

悬停 · 阴影加深浮起

弹窗与抽屉

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

下拉浮层

按最近更新排序

浮层阴影

点选按钮、文字或卡片，写下“圆角小一点”，再把准确位置和页面信息一起复制给 AI。