ios safari中border-radius不生效是因为button等表单控件被当作系统控件直接绘制，跳过css渲染管线；需加-webkit-appearance: none并手动补全border、padding、outline等样式，否则圆角无效。
为什么border-radius在iOS Safari里不生效
不是你写错了，是 Safari 把 button、input[type="submit"] 当成系统控件直接绘制，跳过了 CSS 渲染管线。你写的 border-radius: 0 或 border-radius: 8px 根本没机会起作用——它连“画布”都没进。
典型现象：页面刚加载时按钮是大圆角，点一下才突然变成你设的样式；或者伪类（如 :active）里的圆角始终不生效，因为基础选择器没解除原生渲染。
- 只在真机或 Safari 模拟器触发，桌面 Chrome / Firefox / Edge 完全不受影响
- Android WebView 和 Chrome for Android 也不复现
-
appearance: none（无前缀）仅 Safari 15.4+ 支持，老版本必须用-webkit-appearance: none
哪些元素必须加-webkit-appearance: none
不能只写 button { -webkit-appearance: none } 就完事。Safari 会对所有可能被识别为“原生表单控件”的元素启用默认渲染逻辑，漏掉任意一类，就可能在某个角落冒出一个不听使唤的按钮。
-
button—— 最高频，必加 -
input[type="button"]、input[type="submit"]、input[type="reset"]—— 默认-webkit-appearance: button -
select、textarea、input[type="text"]、input[type="search"]—— 如果你也想自定义它们的圆角或边框，一并加 - 别忽略伪类：如果在
button:active里重写了border-radius，那基础选择器里必须已声明-webkit-appearance: none，否则伪类压根不会执行
加了-webkit-appearance: none后必须手动补哪些样式
它清掉的不只是圆角，而是整套原生样式：默认 border、padding、line-height、font、outline，甚至 cursor 和焦点反馈。不补，按钮大概率塌陷、文字贴边、点击无反馈。
- 显式写
border：比如border: 1px solid #ccc，否则看起来像“没边框”；推荐border: 1px solid transparent避免某些 iOS 版本因 border 缺失导致高度塌陷 - 补
padding或line-height：尤其对input类型，否则文字上下紧贴边缘 -
outline别写none或0—— Safari 可能卡住焦点状态；改用box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25)模拟聚焦效果 - 加
overflow: visible：父容器若含overflow: hidden，会把圆角裁掉 - 慎用
background-clip: border-box—— 和-webkit-appearance: none一起用会导致背景色盖不住圆角边缘，留白边
圆角还是不明显？检查这几个干扰项
即使补全了所有基础样式，圆角仍可能被视觉上削弱或截断，问题往往不在按钮本身，而在它的上下文。
- 父级同时设了
border-radius和overflow: hidden—— 这是 iOS 上的“双重封印”，阴影和圆角都会被裁掉 -
box-shadow的blur-radius+spread-radius超过border-radius × 0.8（DPR=1 下），高 DPR 设备必断 - 按钮内嵌 SVG 或伪元素图标时，Safari 对
type="button"的 baseline 对齐干预极强，优先去掉type属性，用纯<button></button>标签 - 动态插入的按钮（如 Vue mounted 后创建）需确保 DOM 已挂载完成再应用样式，否则
-webkit-appearance: none可能被忽略
最常被忽略的点是：把 -webkit-appearance: none 当成“一劳永逸”的开关，却忘了它本质是“卸载原生 UI 引擎”，之后的所有样式都得你亲手组装——包括那些你以为浏览器该管的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
