input默认用外阴影，但表单输入框普遍需内阴影（inset）实现凹陷感或按下反馈；漏写inset会导致阴影画到元素外部，易被overflow:hidden裁剪或不可见。
直接给 input 加 box-shadow 就行，但必须注意 inset 关键字是否要加、blur-radius 是否被父容器裁剪、以及聚焦态是否需要增强。
input 默认用外阴影还是内阴影？
表单输入框普遍需要「凹陷感」或「被按下」的视觉反馈，所以绝大多数场景下该用 inset。漏掉这个关键字，阴影会画到元素外面，可能被 overflow: hidden 父级裁掉，或者根本看不见。
-
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)→ 常用于默认态，模拟轻微按压 -
box-shadow: 0 2px 4px rgba(0,0,0,0.2)→ 外阴影适合卡片式输入框（如登录框整体浮起），但不适用于单个input的常规样式 - 别混用
inset和外阴影在同一个声明里——必须用逗号分隔，且inset只作用于它所在那一组
为什么加了 box-shadow 却看不到效果？
常见原因不是写错了，而是渲染被截断或参数冲突：
- 父容器设了
overflow: hidden，而你用了较大的blur-radius（比如 >6px），模糊区域被裁掉 -
input高度太小，又没设padding，导致阴影“贴”在文字上，视觉不可辨 - 用了
border: none却没补outline: none，浏览器默认焦点 outline 覆盖了你的阴影 - 深色模式下
rgba(0,0,0,0.1)几乎不可见，需配合@media (prefers-color-scheme: dark)调整颜色
hover 和 focus 状态怎么加阴影才自然？
用户交互时阴影要可感知，但不能突兀。重点控制扩散和模糊的增量，而非全量重写：
- 默认态：
box-shadow: inset 0 1px 2px rgba(0,0,0,0.08) - 聚焦态：
box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), 0 0 0 2px rgba(33, 150, 243, 0.2)—— 第二层是浅蓝色外扩描边，模拟“选中框” - 过渡必须加：
transition: box-shadow 0.2s ease，否则阴影跳变 - 避免在
:hover里加大 blur-radius（如 12px），滚动或悬停频繁时低端机易卡顿
多层阴影叠加要注意什么？
逗号分隔的多层阴影，是从左到右、由远及近绘制的。顺序反了，层次就塌了：
- 想突出内凹 + 外描边，得把
inset放前面，外扩描边放后面：box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 2px rgba(0,0,0,0.05) - 每组参数必须完整：不能省略
blur-radius或color，哪怕写0或transparent - 移动端慎用三层以上阴影，iOS Safari 对 filter 和多层
box-shadow的合成性能敏感
最常被忽略的是：阴影本身不占布局空间，但它的视觉可信度极度依赖周围留白。给 input 加 padding 比调 box-shadow 参数更重要——没内边距，再好的阴影也像贴在文字上喘不过气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
