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),完美模拟了顶部的打光!
创建于 2026/2/28 更新于 2026/5/27