safari中input[type="text"]阴影失效是因为其默认启用系统级渲染样式，需同时设置-webkit-appearance: none、border、background-color、padding、line-height并注意overflow和伪元素重置。
为什么Safari里 input[type="text"] 的阴影总不听使唤
因为 Safari 默认给表单控件加了系统级渲染样式，-webkit-appearance: none 不是“关阴影”，而是“关掉整个原生皮肤”——阴影只是它附带被干掉的其中一项。直接写 box-shadow 往往无效，不是你 CSS 写错了，是浏览器根本没给你画它的机会。
必须同时处理 -webkit-appearance 和重置边框
只加 -webkit-appearance: none 会导致输入框变“透明”或尺寸错乱，尤其在 iOS Safari 上。你得手动补全基础样式，否则用户点不动、看不清、甚至键盘都不弹。
-
-webkit-appearance: none是前提，但单独用等于只拆壳不装新零件 - 必须显式设置
border（哪怕border: 1px solid #ccc），否则部分 Safari 版本会塌成一条线 - 加上
background-color，不然 iOS 上可能透出灰色底纹 - 记得重设
padding和line-height，原生控件的内边距和行高跟 CSS 默认值不一致
input[type="text"] {
-webkit-appearance: none;
border: 1px solid #d1d5db;
background-color: white;
padding: 8px 12px;
line-height: 1.5;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
appearance: none 在 Safari 里的兼容性陷阱
Safari 从 15.4 才开始支持无前缀的 appearance，但 iOS 15.4 之前大量设备还在跑老版本。只写 appearance: none = 白屏风险。
- 必须保留
-webkit-appearance: none，这是 Safari 实际生效的唯一可靠写法 - 可以叠加
appearance: none做渐进增强，但不能依赖它 - 别忘了加
::-webkit-search-cancel-button等伪元素重置，否则搜索框右上角那个 × 会盖住你的阴影
阴影被裁切？检查父容器的 overflow
Safari 对 overflow: hidden 的处理比 Chrome 更激进，如果输入框套在 overflow: hidden 的 div 里，box-shadow 极大概率被直接砍掉。
- 临时调试：给父容器加
overflow: visible看阴影是否回来 - 稳妥解法：把
box-shadow挪到父容器上，输入框自身只负责内容区域 - 或者改用
outline+outline-offset模拟外阴影（注意outline不触发重排，但无法做模糊）
真正卡住人的不是属性本身，是 Safari 把「表单控件」当操作系统 UI 组件来管——你改样式，它先问系统同不同意。所以每次调 box-shadow，本质是在跟两层渲染逻辑打架：WebKit 的表单层 + CSS 层。留个心眼，别光盯着一个属性使劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
