css中没有box-shadow-inset属性，需用box-shadow配合inset关键字实现内阴影；正确写法为box-shadow: inset ...，且需协同background、border及多层inset阴影模拟真实内凹效果。
box-shadow-inset 不能直接写成属性名
CSS 没有 box-shadow-inset 这个独立属性，它是通过 box-shadow 的 inset 关键字实现的。很多人搜“inset shadow”却在 CSS 中硬写 box-shadow-inset: ...，结果完全不生效——这是最常卡住的第一步。
正确写法必须带 inset，且它要放在偏移量、模糊度等参数之后（或之前，但顺序需合法）：
button {
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2);
}
-
inset必须紧挨在box-shadow:后，或放在所有长度值之后；写成inset 0 0 0 1px #000, 0 2px 4px #000是合法的 - 漏掉
inset就是外阴影，和你要的「内凹」效果完全相反 - IE8 及更早版本不支持
box-shadow，如需兼容，得用背景图或 border 模拟
内凹按钮需要配合 background 和 border 调整
纯靠 box-shadow: inset 做出的“按下去”感很弱，因为阴影只是叠加层，没改变按钮本体的明暗逻辑。真实内凹效果依赖三者协同：暗色上边缘 + 亮色下边缘 + 主体背景稍暗于默认态。
典型做法是用两层 inset 阴影模拟立体光效：
button {
background: #e0e0e0;
border: 1px solid #bbb;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8), /* 顶部高光 */
inset 0 -1px 0 rgba(0,0,0,0.15); /* 底部微压暗 */
}
- 第一层
inset 0 1px 0模拟光线从上方照入，在按钮顶部产生亮线 - 第二层
inset 0 -1px 0在底部加极细暗边，强化“被压进去”的错觉 - 如果
background用纯白，这两层阴影会不明显；建议主色略灰（如#e0e0e0），再配高光/暗边才出效果
:active 状态下要增强 inset 对比度
用户点击时，内凹感必须比默认态更强，否则交互反馈丢失。只改 background-color 不够，容易显得只是变色而非“按下”。关键是在 :active 中加大 inset 阴影的深度和对比。
button:active {
background: #d0d0d0;
box-shadow:
inset 0 2px 2px rgba(255,255,255,0.9),
inset 0 -2px 2px rgba(0,0,0,0.25);
}
- 把高光的
y-offset从1px加到2px，同时增加模糊让过渡更自然 - 底部暗边也同步加厚、加深，避免上下光影失衡
- 注意别让
inset阴影的blur过大（比如 >6px），否则边缘发虚，“凹”就变成“晕”了
移动端点击无反馈？检查 touch-action 和 -webkit-appearance
在 iOS Safari 或部分安卓浏览器中，:active 样式可能不触发，导致按钮始终显示默认态——不是 CSS 写错了，而是浏览器默认禁用了触摸态样式响应。
- 给按钮加
-webkit-tap-highlight-color: transparent消除点击高亮干扰 - 确保没设置
touch-action: none（尤其在封装的组件里），它会彻底屏蔽:active - iOS 旧版 Safari 对
inset阴影渲染有偏移 bug，可加-webkit-appearance: none强制走 CSS 渲染路径 - 真机调试时，用
:hover模拟:active很难复现问题，务必在真实触摸操作下验证
内凹效果的成败不在阴影参数多精确，而在于明暗关系是否符合人眼对“受压物体”的直觉判断——顶部亮、底部暗、主体略沉。调的时候盯着那个“像不像被按进去了”，比盯着数字更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
