必须加 -webkit-appearance: none，否则 iOS Safari 中 button 等原生表单控件会绕过 CSS 渲染、忽略 border-radius；需手动补全 border、padding 等基础样式，并注意边框粗细、内容溢出及父级 overflow 干扰。
必须加 -webkit-appearance: none，否则 border-radius 在 iOS Safari 里基本无效
为什么 border-radius 设了却没圆角
iOS Safari 给 <button></button>、<input type="button">、<input type="search"> 等元素默认加了 -webkit-appearance: button 或 -webkit-appearance: searchfield。这个值会跳过 CSS 渲染层，直接调用系统原生控件绘制逻辑——包括它自己定的圆角、内阴影、字体抗锯齿，你的 border-radius 完全被忽略。
这种行为只在真机或 Safari 模拟器上触发，桌面 Chrome / Firefox / Edge 都不复现；Android WebView 和 Chrome for Android 也不受影响。
-
-webkit-appearance: none是强制解耦的第一步，不加这句，后面所有样式调整都是徒劳 -
appearance: none（无前缀）在 Safari 15.4+ 才支持，老版本必须用带前缀的写法 - 别只盯着
button：所有可能被识别为“原生表单控件”的元素都要覆盖，包括<select></select>、<textarea></textarea>、<input type="text">
-webkit-appearance: none 加完后按钮塌了、文字贴边、点击没反馈
清掉原生样式等于清掉了默认 border、padding、line-height、font、甚至 outline 和 cursor。你得手动补全基础样式，否则视觉和交互都会出问题。
立即学习“前端免费学习笔记（深入）”；
- 显式声明
border：比如border: 1px solid #ccc，否则按钮看起来像“消失”了 - 补
padding或line-height：尤其对<input>类型，否则文字上下紧贴边界，iOS 上特别明显 - 慎用
outline：它的虚线框不遵循border-radius，点击时会出现直角轮廓；建议用box-shadow: 0 0 0 2px #007bff替代 - 检查
overflow：父容器若设了overflow: hidden，会把圆角裁掉；某些场景下transform或clip-path也会干扰
圆角还是不明显？两个常见干扰源
即使 -webkit-appearance: none 和 border-radius 都写了，视觉上仍可能“不够圆”，大概率是以下两个原因：
-
边框太粗：实际生效的圆角半径上限是
min(设定值, border-width / 2)。例如设了border: 2px solid #000，那border-radius: 4px几乎看不出效果，至少得设到8px以上 -
内容溢出：图标、文字、伪元素（如
::before）超出容器边界，会“撑破”圆角视觉；务必确认父级有overflow: hidden，且子元素未用position: absolute或transform绕过裁剪 -
background-clip: border-box和border-radius一起用，会导致背景色盖不住圆角边缘，出现白边；改用background-clip: padding-box
调试时重点看哪几个地方
在 Safari 开发者工具里验证是否生效，关键盯两点：
- 选中元素 → “Computed” 面板 → 搜索
appearance，确认值是none，不是button或searchfield - 同个面板里查
border-radius的 computed 值，是不是你写的数字（比如12px），而不是0px - 如果还是不对，逐条关掉父级的
overflow、transform、clip-path，它们都可能在 iOS 上干扰圆角渲染
最常被忽略的是：-webkit-appearance: none 必须写在基础选择器里，不能只写在 :hover 或 :active 伪类中——否则常态下圆角依然被系统接管。
