用 inset 实现按钮按下效果的关键是两组方向相反的内阴影模拟明暗，需配合 border、padding 和背景色才能生效，深色模式下需反转明暗逻辑。
button:hover 用 inset 实现按下效果，关键在阴影方向和颜色对比
按钮按下时的“凹陷感”不是靠位移或缩放，而是靠 box-shadow: inset 模拟光线从斜上方照射后，边缘产生的暗边和内侧高光。真正起作用的是两组相反方向的 inset 阴影：一组偏左上（模拟亮部），一组偏右下（模拟暗部）。颜色必须比按钮背景色更深或更浅，否则看不出层次。
-
inset必须写在box-shadow值最前面，否则被忽略 - 避免只写
inset 0 0 5px #000—— 这只是个模糊光晕，没有方向感，不显“按下去” - 推荐组合：
inset -2px -2px 4px rgba(255,255,255,0.4), inset 2px 2px 4px rgba(0,0,0,0.2) - 深色按钮配浅色上阴影（
rgba(255,255,255,0.3)），浅色按钮配深色下阴影（rgba(0,0,0,0.15)）
为什么直接加 inset 后没反应？常见失效原因
最常遇到的问题不是代码写错，而是 button 默认样式干扰了阴影渲染。浏览器对 button 元素有内置的 border、padding 和 background 行为，尤其在未重置的情况下，inset 阴影可能被裁掉或压在背景色下面。
- 没设
border：inset 阴影以 border 内缘为起点，border: none或默认border: 2px outset都会导致基准错乱 - 没设
background：如果按钮用background: transparent，inset 阴影会透到父容器背景里，视觉上消失 - 用了
appearance: none却忘了补border和padding：现代重置常用这个，但去掉原生样式后必须手动补全渲染边界 - Chrome/Firefox 对
button的 inset 支持稳定，但旧版 Safari 可能需加transform: translateZ(0)强制触发层叠
真实项目中怎么写才不翻车？一个可靠模板
不要依赖“看起来差不多”，而是用可复用、易维护的最小必要配置。下面这段可以直接贴进项目，兼容主流浏览器，且 hover 前后过渡自然：
.btn-press {
border: 1px solid #ccc;
background: #f8f9fa;
padding: 8px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.btn-press:hover {
box-shadow:
inset -2px -2px 4px rgba(255,255,255,0.6),
inset 2px 2px 4px rgba(0,0,0,0.15);
}
- 保留基础外阴影（
box-shadow: 0 1px 3px）让按钮有存在感，hover 时再叠加 inset，避免“突然塌陷”感 -
padding至少 6px，给 inset 阴影留出渲染空间；太小会导致阴影挤在文字边缘，像描边而非凹陷 - 颜色透明度控制在
0.05–0.6区间，超出易发灰或刺眼 - 不建议在
:active里单独写 inset —— 用户点击时间短，:hover已覆盖绝大多数交互场景
深色模式下容易被忽略的细节
inset 阴影在深色背景上几乎不可见，不是参数错了，是明暗逻辑反了。此时不能简单调亮颜色，而要交换亮/暗阴影的位置和角色：
- 深色按钮（如
#2d3748）上，把原本的“上亮下暗”改成“上暗下亮”：inset -2px -2px 4px rgba(0,0,0,0.3), inset 2px 2px 4px rgba(255,255,255,0.1) - 必须配合
@media (prefers-color-scheme: dark)覆盖，不能靠 JS 检测 —— CSS 媒体查询响应更快、更可靠 - 别用
hsl()或color-mix()动态算色 —— 当前主流浏览器对这些函数在 inset 中的支持仍不稳定
inset 阴影不是“加了就凹”，它依赖颜色关系、border 基准、padding 空间三者咬合。最容易漏掉的是 border —— 没它，inset 就没起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
