Safari中扁平化按钮需显式设置border和background-color，否则透明不可点；圆角推荐4px–8px；:focus outline不可删，语义上button与a标签不可混用。
直接用 <button> 写扁平化按钮没问题，但 Safari（iOS 16+ / macOS Ventura 起）会把它变成完全透明、不可点击的“幽灵”，除非你手动补全 border 和 background-color —— 这不是 bug，是 Safari 的明确行为。
appearance: none 后按钮消失？必须补 border 和 background
Safari 清空 appearance: none 后所有原生样式，且不 fallback。不设 border 和 background-color，按钮就真没了。
-
border至少写1px solid transparent：哪怕你要“无边框”，这个透明边框能稳住outline位置，避免焦点环错位 -
background-color必须显式声明，比如#fff或transparent；后者需确保父容器背景可辨识 - 别用
background: linear-gradient(...)+overflow: hidden组合，Safari 渲染可能裁切或错位
圆角怎么设才像现代扁平按钮？
主流扁平按钮的圆角不是越大越好，4px–8px 是经过大量产品验证的舒适区间。
-
border-radius: 4px到6px最稳妥：桌面端可放宽到8px，但超过12px就开始显“胶囊感” - 避免
border-radius: 50%：那是圆形按钮，语义和热区都不同，除非你真在做图标按钮 - 含图标的按钮，左右
padding至少16px，防止文字/图标贴边
:focus 状态下 outline 不能删，但得调 offset
删 outline 是可访问性硬伤。键盘用户靠它定位，屏幕阅读器靠它播报焦点。
立即学习“前端免费学习笔记（深入）”；
- 推荐写
outline: 2px solid #007bff+outline-offset: 2px，让焦点环悬浮在边框外，圆角处不断裂 - 若改用
box-shadow自定义焦点样式，必须同步写outline: none和outline-offset: 0，否则双焦点叠加 - 别只写
:hover，漏掉:focus或:disabled，键盘导航和禁用态就会断裂
button 和 a 标签选哪个？语义错了就废了
样式再像，语义错就等于按钮“没注册进系统”：键盘 Tab 会跳过，屏幕阅读器读成链接，表单提交逻辑也可能崩。
- 触发 JS 行为（弹窗、切换 tab、发 Ajax）→ 用
<button> - 跳转页面或锚点 → 用
<a href="...">，并补role="button"（仅当必须视觉一致时） - 别给
<a>加onclick="return false"模拟按钮——这会让键盘用户无法回车触发，且破坏语义流
真正难的不是让按钮看起来扁平，而是让它在深色模式下对比度达标、缩放 200% 时热区仍够大、键盘 Tab 顺序不乱、禁用态有明确反馈——这些细节没补全，扁平只是假象。
