iOS输入框内阴影非CSS box-shadow所致，而是UIKit系统绘制效果；仅设box-shadow:none无效，必须用-webkit-appearance:none卸载原生样式，并同步重置border、outline、background-color、font-size等属性才能彻底清除。
为什么直接写 box-shadow: none 完全无效
iOS Safari 的 默认使用系统原生控件渲染，它的“内阴影”不是 CSS 的 box-shadow，而是 UIKit 底层绘制层自带的视觉效果。你给它加 box-shadow: none，就像给一辆汽车贴“禁止喷漆”标签——它根本没在用喷漆工艺，自然不响应。
真正起作用的是卸载原生样式：只有 -webkit-appearance: none 才能强制浏览器放弃调用系统控件，转而走标准 DOM 渲染管线，后续的 border、background、outline 才开始真正生效。
-webkit-appearance: none 必须配齐哪几个声明
只写 -webkit-appearance: none 是常见半途而废操作，大概率残留三类问题：
-
border：iOS 原生 input 默认有 1px 灰边，必须显式设为border: 0或border: 1px solid transparent -
outline：聚焦时的蓝色高亮环，得加outline: none（或用outline: 2px solid #007aff换成自定义焦点态） -
-webkit-tap-highlight-color：点击瞬间的灰色蒙层，不处理会在快速连点时留下残影，推荐-webkit-tap-highlight-color: rgba(0,0,0,0)
漏掉任意一项，都可能让“阴影感”以其他形式回归——比如边框+透明背景组合出的灰度差，或 tap 高亮叠加在文字上形成的“脏色块”。
为什么加了 -webkit-appearance: none 还有阴影
最常被忽略的是 background-color。iOS 在卸载原生样式后，若未声明背景，会回退到系统默认浅灰背景（#f5f5f7 左右），再叠加文字渲染反差，视觉上就等效于“阴影粘在字后面”。
另外两个典型干扰源：
- 父容器或
::before/::after伪元素意外写了filter: drop-shadow()，调试时容易误判为 input 自身问题 - 用了
border-radius却没配overflow: hidden，导致阴影（或背景渐变）溢出圆角可见
建议统一加 background-color: transparent，哪怕你之后会覆盖成白色——这是最可控的起点。
老 iOS 版本（如 iOS 12–14）兼容要点
这些版本对 appearance 支持更弱，且阴影逻辑更顽固。防御性写法要多塞两样：
- 补
-webkit-box-shadow: none：虽冗余，但部分旧版 WebView 只认这个前缀 -
font-size: 16px强制设在input[type="text"]上：小于 16px 时 iOS 会触发强制缩放，连带激活额外渲染层，阴影变形或复现 - 避免
transform和will-change：它们可能意外开启硬件加速层，让底层阴影渲染异常，尤其在微信内置 WebView 中高频出现
真实项目里，别信“加一个 -webkit-appearance: none 就完事”的说法——iOS 输入框的阴影是系统级视觉契约，不是 CSS 层面能一键开关的开关，它需要一整套协同重置。最稳的写法永远是把 -webkit-appearance、border、background、outline、font-size 全部列明，少一个都可能在某个机型/WebView 上翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
