为什么CSS button在Safari中出现默认圆角

Safari中button圆角不响应border-radius是因为-webkit-appearance: button启用系统原生渲染，需对button、input[type="button/submit/reset"]、select、textarea、input[type="text/search"]统一设-webkit-appearance: none并补全border、padding等样式。

button在Safari中圆角不听border-radius控制

不是你写的border-radius: 0没生效，而是 Safari 根本没走这一步计算。它给<button>和<input type="submit">默认加了-webkit-appearance: button，直接调用系统原生绘制逻辑——圆角、内阴影、高亮反馈全由 iOS 系统控件硬编码决定，CSS 层被跳过。

哪些元素必须加-webkit-appearance: none

不能只写button { -webkit-appearance: none }就完事。Safari 会把以下所有元素识别为“可接管的原生控件”，漏掉任一，都可能在表单某处冒出一个圆角按钮：

1. <button>（含无type属性的，默认为submit）
2. <input type="button">、<input type="submit">、<input type="reset">
3. <select>、<textarea>、<input type="text">、<input type="search">

注意：:active或:focus里重设border-radius，前提是基础选择器已声明-webkit-appearance: none，否则伪类压根不会触发。

加了-webkit-appearance: none后按钮“塌了”或点不动

它清掉的是整套原生样式：默认border、padding、line-height、outline、cursor、甚至font和background-color。不补，就会出现文字贴边、高度塌陷、点击无反馈等问题：

1. 显式写border: 1px solid transparent——避免某些 iOS 版本因 border 缺失导致高度异常
2. 补padding或line-height——尤其对input类型，否则文字上下紧贴边缘
3. 别写outline: none——Safari 可能卡住焦点状态；改用box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25)模拟聚焦
4. 确认父容器overflow: visible——overflow: hidden会把圆角裁掉
5. 慎用background-clip: border-box——和-webkit-appearance: none一起用，会导致背景色盖不住圆角边缘，留白边

兼容性与验证要点

老版本 Safari（iOS 15.3 及更早）不支持标准appearance: none，必须双写且顺序固定：

button, input[type="submit"] {-webkit-appearance: none;appearance: none;}

验证是否生效，打开 Safari 开发者工具，选中按钮，在“Computed”面板查两点：

1. appearance值是不是none，而不是button
2. border-radius的 computed 值是不是你写的数字（如0px），而不是系统 fallback 的4px或8px

如果还是圆角，逐条关闭父级的overflow、transform、clip-path——它们都可能干扰圆角渲染，这点容易被忽略。