input加box-shadow不生效主因是outline未清除、border缺失或appearance重置后样式遗漏；需设outline:none、border（如1px solid transparent）、显式padding，并用父容器padding预留阴影空间。
input 元素怎么加 box-shadow 不生效？
直接给 <input> 写 box-shadow 大概率没反应，不是 CSS 写错了，而是浏览器默认给 input 设了 border 和 outline，且部分浏览器（比如旧版 Safari）会忽略表单控件的阴影。必须显式清除干扰项，并确保元素能触发渲染层叠。
- 先加
outline: none，否则聚焦时系统 outline 会盖住阴影 - 确认有
border（哪怕border: 1px solid transparent），否则某些浏览器不触发 box-shadow 渲染 - 避免用
appearance: none后忘记重置基础样式，尤其在 Safari 中容易导致阴影失效
纯 CSS 实现输入框阴影的最小可靠写法
以下代码在 Chrome、Firefox、Edge、Safari（15.4+）都稳定生效：
input[type="text"],
input[type="email"],
input[type="password"] {
border: 1px solid #ddd;
padding: 8px 12px;
border-radius: 4px;
outline: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
<p>input:focus {
border-color: #007bff;
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
}</p>
关键点：box-shadow 值里第三个参数（模糊半径）建议 ≥2，太小在高分屏上几乎不可见；rgba() 的透明度别设成 0，否则阴影完全消失。
用 class 控制不同阴影效果，避免全局污染
不要直接改所有 input，而是用 class 精准控制。比如需要「内阴影」或「深色主题适配」时：
-
class="input-shadow-sm"→box-shadow: 0 1px 2px rgba(0,0,0,0.05) -
class="input-shadow-inner"→box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) -
class="input-shadow-dark"→ 配合深色背景，用rgba(255,255,255,0.1)避免发灰
注意：inset 阴影对 input 有效，但别和 background 冲突——如果背景是纯白，inset 可能看不见。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
移动端输入框阴影被裁切怎么办
iOS Safari 对表单元素有硬性裁切（overflow: hidden），导致 box-shadow 被截断。解决方式不是调 overflow，而是用父容器撑开：
<div class="input-wrapper"> <input type="text" placeholder="搜索"> </div>
然后给 wrapper 加 padding 和 overflow: visible：
.input-wrapper {
padding: 2px; /* 至少留 2px 给阴影扩散 */
overflow: visible;
}
.input-wrapper input {
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
这个 padding 值要实测——太小仍会被裁，太大影响布局。iPhone 上通常 2px 刚好够用。
阴影本身不难，难的是它总在边界、聚焦态、主题切换和移动端渲染之间悄悄失效。多试两遍 focus/outfocus 状态，再拿真机看一眼，比查文档管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
