ui中的内部阴影
UI 内阴影的视觉含义、用法和场景。
#status / growing
#type / concept
[!info] related notes box-shadow-detailed-guide ui-outer-shadow
ui中的内部阴影
- In (内阴影 / Inner Shadow):模拟“凹陷”或“内反光”
- CSS 对应:
box-shadow: inset 0 2px 4px rgba(…) - 视觉含义: 光线打进了容器内部。它可以表示一个“被按下去的坑”,也可以模拟玻璃边缘的“高光反光”。
- 使用场景: 搜索框的输入区域(显得深邃)、被按下的按钮状态。
- 极客玩法: 之前咱们讨论的“顶部霓虹绿发光边缘”,其实就是一个 Y 轴为正数、没有模糊的极细 内阴影 (Inset),完美模拟了顶部的打光!
- CSS 对应: