ios输入框内阴影是uikit原生渲染效果，非css box-shadow，故box-shadow:none无效；必须用-webkit-appearance:none切换至dom渲染，再配合background-color:transparent、border:1px solid transparent及padding/line-height调整。
移动端输入框在 iOS 下的“内阴影”根本不是 box-shadow，直接写 box-shadow: none 无效是正常的——你是在对空气调样式。
为什么 box-shadow: none 完全没用
iOS Safari 的 <input> 默认走 UIKit 原生渲染管线，那个“阴影”是系统控件底层绘制层自带的视觉效果，和 CSS 的 box-shadow 属于两个平行世界。你给它加 box-shadow: none，就像给电梯按钮贴张“禁止按”纸条。
-
box-shadow只影响标准 DOM 渲染路径下的投影，原生控件不走这条路 - 部分 iOS 版本（如 15.4+）甚至在 UA 样式里硬编码了
box-shadow: 0 0 5px rgba(0,0,0,.2)，且优先级高于开发者样式 - 调试时看到 DevTools 里
box-shadow显示被划掉？那只是表象，真正起作用的阴影压根没挂在这个属性上
-webkit-appearance: none 是必须的第一步
只有 -webkit-appearance: none 能强制浏览器卸载 UIKit 原生控件，切换到标准 DOM 渲染模式，后续所有 CSS 才开始真正接管。
- 仅写
appearance: none在 iOS 14 及更早版本中完全不生效，必须带-webkit-前缀 - 单独加这行大概率出现“阴影没了但边框/背景/文字位置全乱了”的情况——这不是 bug，是卸载原生样式后，UA 默认值暴露出来了
- 某些微信 WebView（尤其 8.0.x 旧版）对
-webkit-appearance: none支持不稳定，可能触发失焦卡顿，需配合blur事件兜底
漏掉这三项，阴影会以其他形式“复活”
只写 -webkit-appearance: none 是半截工程。下面三项缺一不可：
-
background-color: transparent：iOS 卸载原生样式后若不显式声明背景，会回退到浅灰（#f5f5f7），和文字形成色差，“模拟出”阴影感 -
border: 1px solid transparent：别用border: none，某些 iOS 版本下会触发回退机制，重新拉起原生渲染；transparent边框才是安全起点 -
padding和line-height：原生 input 的padding: 0.5em和line-height: normal会保留，导致文字贴边或上下留白异常，视觉上像有“浮起阴影”
老 iOS 版本（12–14）要多塞两样防御性声明
这些版本对 appearance 支持弱，阴影逻辑更顽固，建议补：
-
-webkit-box-shadow: none：冗余但必要，部分旧 WebView 只认这个前缀 -
font-size: 16px：小于 16px 时 iOS 会强制缩放页面，连带激活额外渲染层，阴影可能变形或复现 - 避免在 input 上用
transform或will-change：可能意外激活硬件加速层，让阴影渲染异常
最常被忽略的不是代码写错，而是把父容器、伪元素或 filter: drop-shadow() 造成的视觉干扰，误判成 input 自身阴影——先检查这些地方，再动 input 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
