input上box-shadow: inset无效是因默认border和不透明background遮挡内阴影；需设border: none、background: rgba(255,255,255,0.9)或transparent、足够padding，且inset必须置于box-shadow值最前。
box-shadow: inset 用在 input 上为什么没效果？
直接给 <input> 加 box-shadow: inset 常常看不到阴影，不是语法错，而是默认的 border 和 background 遮住了它。浏览器渲染时，inset 阴影会画在 border 内侧、内容区外侧，如果 input 有 solid 边框或不透明背景，阴影就被盖住了。
- 必须显式设置
border: none或border-color: transparent，否则边框会挡住内阴影 -
background不能是white或不透明色；建议用background: rgba(255,255,255,0.9)或干脆background: transparent - 需要给 input 留出足够内边距（
padding），否则阴影挤在文字边缘，视觉上不明显
input 内阴影的最小可用 CSS 写法
以下这段能立刻生效，不用改 HTML 结构：
input {
padding: 8px 12px;
border: none;
background: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
}
关键点：
-
inset必须写在box-shadow值最前面，顺序错（比如写成box-shadow: 0 2px 6px inset）就失效 - 四个参数中，
0是水平偏移，2px是垂直偏移（向下压，让阴影像“凹下去”），6px是模糊半径，rgba(0,0,0,0.1)控制深浅和透明度 - 如果想模拟更真实的“按压感”，可加
transition: box-shadow 0.15s，配合:focus改变阴影强度
focus 状态下加深内阴影的常见写法
用户点击输入框时增强反馈，但要注意不要只改阴影——容易导致布局跳动。稳妥做法是只调参，不动尺寸：
input:focus {
outline: none;
box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.15);
}
注意：
- 务必加
outline: none，否则原生 focus 轮廓线和阴影叠加，显得杂乱 - 垂直偏移从
2px增到3px、模糊值加大、透明度略升，就能感知“更深”，但不会改变 input 高度 - 避免在
:focus里加border或改padding，否则可能触发重排，尤其在表单密集区域
移动端 Safari 下 inset 阴影不显示怎么办？
iOS 15+ 的 Safari 对 input 的渲染有特殊限制：当 appearance: none 缺失时，box-shadow: inset 可能被忽略。这不是 bug，是 WebKit 主动压制了部分自定义样式以保原生体验。
- 必须加
-webkit-appearance: none（仅 Safari/Chrome Android 需要，Firefox 不认但无害） - 同时补上
appearance: none，未来兼容性更好 - 如果用了
background: transparent，iOS 下文字可能发虚，建议至少保留rgba(255,255,255,0.95)
最终推荐组合：
input {
-webkit-appearance: none;
appearance: none;
padding: 8px 12px;
border: none;
background: rgba(255, 255, 255, 0.95);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
}
真正麻烦的不是写法，是不同浏览器对表单控件“样式接管权”的争夺——inset 阴影只是其中一环，稍不注意就回退到系统默认样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
