最简可行方案是box-shadow: inset 0 0 10px #000，但需确保元素有宽高、无overflow:hidden裁剪、背景色不掩盖阴影，且多层inset可叠加；padding无法替代其立体感与视觉深度。
box-shadow inset 怎么写才出内阴影
直接写 box-shadow: inset 0 0 10px #000 是最简可行方案，但多数人卡在“没效果”上——本质是元素没内容、没高度，或背景色盖住了阴影。内阴影不是“画在内部”，而是从元素边界向内投射，必须有可渲染的区域才能看见。
- 确保元素有明确宽高（
width/height或内容撑开） - 避免父容器
overflow: hidden裁掉阴影（inset 阴影仍受裁剪影响） - 如果背景是纯色，阴影可能被视觉弱化，建议用半透色如
rgba(0,0,0,0.2) - 多层 inset 阴影可叠加：
box-shadow: inset 0 0 4px rgba(0,0,0,0.1), inset 0 2px 6px rgba(0,0,0,0.15)
为什么 padding 不能替代 inset 阴影做内嵌感
padding 只是留白，不产生视觉深度；而 box-shadow: inset 模拟的是光从外向内打的明暗过渡，天然带立体感。用 padding + 边框模拟“内嵌”，在圆角、渐变、响应式缩放时极易露馅——边框是硬边，阴影是柔边，人眼对这两者敏感度差一个数量级。
- padding 改变元素尺寸，影响布局流；inset 阴影不占空间，不影响盒模型计算
- 移动端缩放时，固定像素的 padding 显得突兀，而
box-shadow的模糊半径会随设备像素比自然适配 - 想实现“按下去”的按钮效果？只调 padding 不够，必须靠 inset 阴影降低中心亮度来骗过视觉系统
box-shadow inset 在不同浏览器里的兼容性雷区
现代浏览器全支持，但老版本 Safari（≤ iOS 9.3）和 Android Browser 对多层 inset 阴影解析不稳定，尤其混用 inset 和非 inset 时会直接丢弃整条声明。
- 单条 inset 阴影（
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)）在 IE11+、Edge 12+、Chrome 10+、Firefox 4+ 均安全 - 避免写成
box-shadow: 0 0 0 #000, inset 0 0 10px #000—— Safari 9 会忽略整个声明 - 需要兼容 iOS 9？把 inset 单独提一行，其他 shadow 用 JS 动态加，或降级为 border + background-gradient
配合 box-sizing 和 border 实现更真实的内嵌层次
单纯 inset 阴影像浮雕，加一层细边框（border: 1px solid rgba(255,255,255,0.3)）能强化“被压进去”的错觉——这是 UI 设计里常用的微交互 trick。
立即学习“前端免费学习笔记（深入）”；
- 务必设
box-sizing: border-box，否则 border 会让元素变大，破坏布局预期 - 白色亮边要带透明度，否则在深色背景下刺眼；暗色背景则可用
rgba(0,0,0,0.1)做压边 - 圆角元素加 inset 阴影时，
border-radius值要 ≥ 阴影模糊半径，否则边缘会生硬断裂 - 滚动容器内慎用：某些安卓 WebView 中，inset 阴影在 scroll 时会闪烁或消失
inset 是光线逻辑，不是绘图指令。很多人调半天参数没效果，最后发现只是忘了给 div 设个 min-height: 20px。 
