扁平按钮需有控制地移除拟物干扰，保留交互状态与视觉层级；必须重置 border 和 background 以防 Safari 下消失，focus 时须有 outline 或 box-shadow 提示，禁用 text-shadow 和过度圆角。
扁平按钮不是“去掉所有样式”，而是有控制地移除拟物干扰，同时保留可感知的交互状态和视觉层级。直接套用 border: none 或 background: transparent 很可能让按钮在 Safari 下消失、在高对比度模式下不可见、或焦点状态下完全失焦。
button 元素禁用 appearance 后必须重置 border 和 background
Safari（尤其 iOS 16+ 和 macOS Ventura 后）对 appearance: none 的处理极严格：一旦设了，原生按钮的默认边框和背景会彻底清空，且不自动 fallback。若没手动补 border 和 background，按钮就真成“看不见的坑”。
- 错误写法：
button { appearance: none; }→ 按钮在 Safari 中透明不可点 - 正确写法：
button { appearance: none; border: 1px solid #ccc; background-color: #fff; } - 若要完全无边框，至少保留
border: 1px solid transparent，否则 focus outline 可能错位或被裁切
outline 在 :focus 时不能删，但得调 outline-offset
可访问性要求所有交互元素必须有清晰的键盘焦点指示。直接写 outline: none 是反模式，尤其对屏幕阅读器用户是致命缺陷。问题在于原生 outline 默认紧贴边框，在圆角按钮上会产生“跳动”或“锯齿感”。
- 安全做法：
button:focus { outline: 2px solid #007bff; outline-offset: 2px; } - 避免用
outline: 0或outline: unset替代，它们不保证可访问性合规 - 如需自定义焦点样式，可用
box-shadow: 0 0 0 2px #007bff;，但必须搭配outline: none+ 显式声明outline-offset: 0防止双焦点
圆角别乱用 border-radius: 50%，优先选 2px–4px 或全站统一为 0
扁平设计的核心是降低视觉噪音，而非追求“圆润感”。过度圆角（如 50%）会让按钮失去结构锚点，尤其在按钮组中造成对齐混乱；而 border-radius: 0 虽激进，但只要全站一致、且配合适当的 padding 和字重，反而更干净。
- 推荐值：
border-radius: 2px（通用）、3px（稍柔和）、或全站border-radius: 0 - 禁用：
border-radius: 50%（除非明确是图标按钮）、border-radius: 8px（已滑向卡片风格） - 注意：Safari 对
border-radius和overflow: hidden组合渲染不稳定，慎用于带渐变背景的按钮
禁用 text-shadow 和 box-shadow，但 hover/focus 可加轻量提示
扁平 ≠ 无反馈。关键区别在于：常态下不靠阴影建立“立体感”，但交互态可用极简阴影强化状态变化。滥用 box-shadow（如 0 2px 4px rgba(0,0,0,.2)）会立刻把按钮拉回拟物时代。
- 常态：
text-shadow: none;、box-shadow: none; - hover/focus 可选：
box-shadow: 0 1px 0 rgba(0,0,0,.08);（仅下边缘一线阴影） - 禁用：
text-shadow: 0 1px 0 #fff;（伪高光）、box-shadow: inset 0 2px 4px rgba(0,0,0,.1)（内凹感）
最常被忽略的一点：扁平按钮的“平”不是靠删样式实现的，而是靠克制——每个属性都得回答“它是否服务于可识别性或可操作性”。删掉一个 border 很容易，但补上可访问的 focus 样式、适配深色模式的 color、以及高对比度下的 fallback，才是真正落地的难点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
