input 的 inset 阴影常不显示，根本原因是默认 border、聚焦 outline 和不足 padding 三层干扰；需清除 border 和 outline，并用 padding 留出空间，配合合理 box-shadow 参数（如 inset 0 1px 3px rgba(0,0,0,0.15)）才可见。
box-shadow 的 inset 关键字确实能画出“内阴影”，但直接写 input { box-shadow: inset 0 0 6px #ccc; } 很可能啥也看不见——不是语法错，而是输入框默认有 border 和 outline，它们会遮挡、干扰甚至完全吞掉内阴影。
为什么 input 的 inset 阴影经常不显示
根本原因不是 inset 不生效，而是三层干扰叠加：
• 默认 border（比如 1px solid #ccc）压在内阴影上层，阴影被盖住
• 浏览器聚焦时自动加的 outline（蓝色环）永远在最顶层，强行覆盖所有阴影
• 输入框内容区（padding 区）太窄，内阴影被挤到不可见区域
input 内阴影必须配合的三步清理
- 显式清除边框：
border: none或更稳妥的border: 2px solid transparent（保留点击热区，避免 Safari 点击失焦） - 干掉 outline：
outline: none，否则哪怕你写了inset，焦点态下还是只看到 outline - 留出内阴影空间：用
padding扩出内容区，比如padding: 10px 12px，否则inset阴影会紧贴文字，视觉上“融”进背景里
真正可用的 inset 输入框写法
下面这段是经过 Chrome/Firefox/Safari 实测可见的最小可行配置：
input {
border: 2px solid transparent;
outline: none;
padding: 10px 12px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}
关键点：
• inset 0 1px 3px：垂直偏移 +1px 让阴影“浮”在文字下方，不是居中晕染
• rgba(0,0,0,0.15)：透明度必须够低，否则像脏污；太高则盖住文字
• 不要用 inset 0 0——那会变成一团糊，失去方向感和层次
想让内阴影随 focus 动态变化？别只改 color
单纯在 :focus 里改 box-shadow 的颜色，效果往往平庸。真正有用的是组合调整：
• 增加 blur 值（如从 3px → 6px），让光感更“透”
• 微调 v-offset（如从 1px → 2px），强化“被点亮”的纵深感
• 同时加 transition: box-shadow 0.2s ease，否则切换生硬得像开关
立即学习“前端免费学习笔记（深入）”；
容易漏掉的一点：如果用了 background-color，确保它不是纯白——浅灰背景（如 #fafafa）能让 inset 阴影对比更清晰。
