safari中input圆角不由border-radius控制，而取决于-webkit-appearance:none是否生效及系统渲染逻辑；仅设border-radius:0无效，需配合重置边框、背景、outline等样式，并注意ios版本兼容性与像素对齐问题。
直接结论：Safari 中 input 的圆角不是靠 border-radius 控制的，而是由 -webkit-appearance: none 是否生效 + 系统默认渲染逻辑共同决定；只写 border-radius: 0 没用。
为什么 border-radius: 0 在 Safari 里对 input 无效
因为 Safari（及 iOS WebKit）对表单控件有强默认样式接管机制：input[type="text"]、input[type="submit"] 等默认被赋予 -webkit-appearance: button 或 textfield，此时 border-radius 被忽略，圆角由系统 UI 组件渲染层硬编码控制。
- 即使你写了
border-radius: 0，只要-webkit-appearance没被显式重置，它就不起作用 - 某些旧版 Safari（如 iOS 15.6 之前）还会把
appearance: none当作无效声明，必须双写-webkit-appearance: none - 如果同时用了
box-shadow或outline，它们的视觉叠加可能让“圆角感”更顽固
-webkit-appearance: none 必须和这些属性一起用
单独写 -webkit-appearance: none 只是第一步，它会清空系统样式，但也会带出一堆“裸样式”问题——比如边框消失、文字错位、甚至输入框无法聚焦。必须配套重置关键属性：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 加
border: 1px solid #ccc（或你需要的颜色/宽度），否则边框彻底消失 - 显式设
background-color，否则某些 Safari 版本下背景变透明或继承父级色块 - 补上
outline: none和box-shadow: none，否则焦点时仍有光晕或阴影干扰“无圆角”观感 - 若需保留可访问性，别真删
outline，改用outline: 2px solid #007aff+outline-offset: 2px（注意：Safari 不支持outline-offset，得用伪元素模拟）
iOS 上输不了字？检查 -webkit-user-select
常见翻车点：为防误触加了全局 -webkit-user-select: none，结果连 input 都没法选中、无法唤起键盘。
- 必须对
input单独覆盖：input { -webkit-user-select: auto; } - 同理，
textarea也要加这一行，否则 iOS 下无法长按弹出“粘贴/选择”菜单 - 别依赖
user-select: auto，WebKit 旧版本不识别标准写法，必须带前缀
仍残留微圆角？可能是 font-size 或 line-height 导致
Safari 对内联元素高度计算更敏感，当 font-size 小、line-height 大，或容器 padding 不均时，渲染引擎可能在像素级产生 0.5px 的圆角残留，肉眼可见“不完全直角”。
- 统一设
font-size: 16px（iOS 默认可读最小值）、line-height: 1.2，避免基线浮动 -
padding建议用偶数像素（如8px、12px），避开 subpixel 渲染抖动 - 极端情况可加
transform: translateZ(0)强制硬件加速，让 Safari 重新走像素对齐路径
真正麻烦的不是“怎么去掉圆角”，而是 Safari 会在不同 iOS 版本间反复横跳——比如 iOS 16.4 加了新限制，iOS 17.5 又悄悄放宽了 appearance 的兼容范围。每次发版前，务必在真机上用 input 手动点、长按、缩放测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
