必须加-webkit-appearance: none才能使border-radius: 0在iOS Safari中生效，因其默认启用系统原生渲染，绕过CSS圆角计算；禁用后需手动补全border、padding等基础样式，否则按钮可能塌陷或不可见。
移动端iOS Safari中input圆角无法用border-radius清除？
不是CSS没生效，是iOS Safari给input加了私有渲染样式，border-radius单独设为0常被忽略。必须配合-webkit-appearance: none才能真正剥离原生外观。
常见错误是只写：
input { border-radius: 0; }——这在iOS上基本无效。
-
-webkit-appearance: none是关键，它禁用系统控件默认样式（包括圆角、阴影、内边距） - 禁用后需手动补全基础样式：如
border、padding、background，否则可能变“看不见”或塌陷 - Android Chrome一般不强制圆角，但加
-webkit-appearance: none可保证跨平台一致
为什么加了-webkit-appearance: none还残留圆角？
通常是因为父容器或伪元素干扰。iOS Safari有时会把input包裹在匿名内部盒子中，而border-radius实际作用在该盒子上。
解决方法是把重置样式下推一层：
立即学习“前端免费学习笔记（深入）”；
- 对
input本身设border-radius: 0+-webkit-appearance: none - 同时加
overflow: hidden，防止内部渲染溢出圆角 - 若仍无效，尝试
outline: none（聚焦时的外发光也可能被误认为圆角） - 避免用
border: none代替border: 1px solid #ccc——无边框时部分iOS版本会回退到带圆角的“无样式态”
需要兼容微信内置浏览器吗？
需要。微信iOS版基于WKWebView，行为和Safari一致；安卓微信则更接近Chrome，但仍有少量定制渲染。统一方案最稳妥：
input {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
overflow: hidden;
border: 1px solid #ddd;
}
-
appearance: none是标准属性，现代Android和桌面端也支持，作为-webkit-appearance的补充 - 微信安卓版偶尔会忽略
border-radius: 0，此时加background-clip: padding-box可辅助裁切 - 不要依赖
!important强行覆盖——微信某些版本会拦截带!important的表单样式
圆角消失后输入光标偏移或文字贴边怎么办？
因为-webkit-appearance: none清除了系统默认padding，文字直接顶到边框。这不是bug，是预期行为。
- 必须显式设置
padding，例如padding: 8px 12px - iOS键盘弹起时，若
input高度过小（如height: 30px），文字可能被截断，建议用min-height替代height - 如果使用
box-sizing: border-box，注意padding会压缩内容区，需同步调整font-size或行高防挤压
overflow: hidden和手动补padding——这两处不处理，看起来就像“样式写了但没用”。 
