光影与氛围

内阴影凹陷 Pressed-in / Inset Shadow

用内阴影让元素看起来凹进背景里,像被按下去的实体按键

凹陷

(hover 色块观察阴影走向)

**内阴影凹陷(Pressed-in)**把阴影方向反过来做进元素内部:上缘暗、下缘亮,视觉上元素就“凹”进去了。普通外阴影让东西浮起来,内阴影让东西陷下去——它是所有“按下、嵌入、选中”状态的视觉基础。

什么时候用:按钮的 active 按下态、 segmented control 的选中项、输入框聚焦内嵌感、新拟态的按下反馈。与“长阴影”正好是一对:长阴影往外抛,内凹陷往里收。

对 AI 说清楚的三要素:① 关键词 inset,阴影画在元素内部;② 上暗下亮(光源在上方时凹面的受光逻辑);③ 配合 scale(0.98) 或亮度微降,反馈更真实。

复制即用的提示词片段

按下态用内阴影凹陷(Pressed-in):box-shadow 改为
inset 0 8px 16px 暗色 + inset 0 -8px 16px 亮色,
配合 scale(0.98) 一起用,营造"被按下去"的物理反馈。