内阴影凹陷 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) 一起用,营造"被按下去"的物理反馈。