阴影Shadow
你可能会说
给卡片下面加一层淡淡的投影，让它像浮在页面上。
模拟光影投射效果以构建界面元素悬浮感与视觉层级深度的样式属性。弹窗、浮动菜单和需要与背景分开的卡片可以用 box-shadow；前两个值控制 x / y 偏移，后面可设置模糊、扩散和颜色。阴影只能辅助表达层级，浅色界面应保持轻微且方向一致；给每张卡片都加重阴影会让页面显得杂乱。
也常被叫作阴影盒阴影投影box-shadow
你可以这样告诉 AI Agent
请建立统一阴影层级：普通卡片尽量平，Dropdown 和 Popover 使用轻阴影，Modal 使用更明确但克制的阴影，方向保持一致。不要给正文加阴影；在浅色和深色背景上分别检查边界。
什么时候用
- 卡片 Card 悬停浮起：浅阴影提示可点→
- 选择器 Select 下拉、文字提示 Tooltip 浮层边缘：和页面区分开全部状态全部状态进行中已完成已过期
- 内阴影做凹陷：输入框、进度槽往里凹内阴影可以表现向内凹陷的表面
什么时候不用
- 阴影过深过重：会让元素层级显得突兀
- 每个元素都加阴影：会削弱层级区分
- 阴影方向不一致：应在全站统一光源方向
- 给正文文字加投影会降低字形清晰度，不能替代对比度正文加了投影
组成结构 · Anatomy
卡片☀
投下阴影的那个盒子
x / y 偏移 + 模糊 + 扩散，颜色带透明度
全站统一一个方向，阴影才不乱
常见变体 · Variants
浅阴影Small
卡片
普通卡片的默认层次
中阴影Medium
浮起
悬停浮起、下拉菜单
浮起阴影Large
弹窗
弹窗、抽屉这类最上层
内阴影Inset
凹槽
输入框、进度槽做凹陷感
典型使用场景
卡片悬停浮起
设计规范.md
昨天 18:02 更新
默认 · 几乎无阴影
首页改版.fig
2 小时前更新
悬停 · 阴影加深浮起
弹窗与抽屉
下拉浮层
按最近更新排序
凹陷的进度槽
存储空间7.2 / 10 GB
槽用 inset 内阴影凹进去，填充条才像嵌在里面
延伸阅读 · 权威出处
快速练习