必须加-webkit-appearance: none，否则iOS Safari中border-radius对button、input、textarea等原生表单控件无效，因其默认启用系统级渲染（如button、textfield），完全绕过CSS样式层；加该声明后需手动补全border、padding、line-height等基础样式。
-webkit-appearance: none 是必须加的，否则 border-radius 在 iOS Safari 里基本无效。
为什么 border-radius 设了却没用
iOS Safari 给 <input>、<textarea>、<button> 等默认加了 -webkit-appearance: button（或 textfield），这个值会强制启用系统原生渲染——圆角、内阴影、字体、点击反馈全由系统控件层画，完全绕过你的 CSS。即使你写 border-radius: 0，它也不认。
这种行为只在真机或 Safari 模拟器上复现；桌面 Chrome/Firefox/Edge 都不触发。Android WebView 和 Chrome for Android 不受影响。
- 必须对所有可能被 Safari 当作“原生表单控件”的元素统一处理：
<input type="text">、<input type="button">、<input type="submit">、<textarea>、<select>、<button> -
appearance: none（无前缀）在 Safari 15.4+ 才支持，老版本必须用-webkit-appearance: none - 伪类里重设
border-radius（比如input:focus）也得确保基础选择器已声明-webkit-appearance: none
加了 -webkit-appearance: none 后必须补哪些样式
它会清掉所有原生样式，不手动补全就会塌陷、文字贴边、点击无反馈：
立即学习“前端免费学习笔记（深入）”；
- 显式设置
border：原生有默认边框，清掉后若不补，看起来像“没边框” - 补
line-height或padding：尤其<input>类型，否则文字上下贴边 - 确认
overflow: visible：某些父容器设了overflow: hidden，会把圆角裁掉 - 慎用
outline：它的虚线框不遵循border-radius，建议用box-shadow: 0 0 0 2px #007bff替代 - 别和
background-clip: border-box一起用：会导致背景色盖住圆角边缘，留白边
为什么 overflow: hidden + border-radius 还是漏角
这不是 appearance 的问题，而是 Safari 渲染机制导致的裁剪脱钩：当元素同时有 border-radius、overflow: hidden 和 transition（比如 transform: scale(1.05)）时，过渡过程中裁剪区域可能松动，内容从圆角外溢出。
此时仅靠 -webkit-appearance: none 不够，必须叠加底层裁剪：
- 优先用
-webkit-mask：例如-webkit-mask: radial-gradient(circle at top left, transparent 8px, #000 8px) top left / 100% 100%，其中8px要和你的border-radius值一致 - 搭配
will-change: transform：避免 Safari 跳过硬件加速层，加剧裁剪失效 - 动画尽量用
transform或opacity触发，避免 width/height 等引发重排
background-image 溢出直角怎么修
当输入框或按钮用了 linear-gradient 或图片背景，Safari 会严格按 background-clip: border-box（默认值）只裁背景色，不裁背景图，导致四角“捅出”尖锐色块。
解决方法不是加 overflow: hidden（会误裁阴影、伪元素），而是：
- 显式写
background-clip: padding-box，让背景图只铺在内边距区，圆角交由border-radius统一控制 - 确保
box-sizing: border-box，避免尺寸计算偏差 - 如果边框本身要渐变（设计强需求），就得用
-webkit-mask强制兜底，但注意 iOS 15.0–15.3 仅支持radial-gradient，且性能略重
真正容易被忽略的是：先临时删掉 border-radius，确认溢出是否消失——如果还在，说明根本不是圆角问题，而是其他布局或遮罩干扰。
