safari 中 button 元素设 appearance: none 后必须显式设置 border 和 background 才可见可交互；focus 状态下 outline 不可删除，需用 outline-offset 或 box-shadow 规范焦点样式；扁平设计应控制 border-radius（2–4px）和禁用常态 text-shadow；语义上按钮行为用 ，跳转用 并补全可访问性属性。
button 元素禁用 appearance: none 后必须重置 border 和 background
直接写 button { appearance: none; } 会让按钮在 Safari（尤其是 iOS 16+ 和 macOS Ventura 起）彻底透明——既不可见，也无法点击。这不是兼容性“偶尔出问题”，而是 Safari 的明确行为：清空所有原生样式且不 fallback。
安全做法是立即补全基础视觉锚点：
-
border至少设为1px solid transparent（哪怕你想要“无边框”，这个透明边框能稳定 focus outline 位置） -
background-color必须显式声明，例如#fff或transparent（但后者需确保父容器背景可辨识） - 若用渐变背景，避免和
overflow: hidden同时使用，Safari 渲染可能错位或裁切
focus 状态下 outline 不能删，但默认 outline-offset 需调整
写 outline: none 是可访问性硬伤，尤其对键盘用户和屏幕阅读器。原生 outline 在圆角按钮上会紧贴边框，导致视觉“跳动”或锯齿感，但这不是删掉的理由。
正确解法是控制 outline 的形态与位置：
- 用
outline: 2px solid #007bff提供足够对比度的焦点环 - 必须配
outline-offset: 2px，让焦点环悬浮于边框外，避免圆角处断裂 - 若改用
box-shadow: 0 0 0 2px #007bff自定义焦点样式，得同步写outline: none+outline-offset: 0，否则可能双焦点叠加
border-radius 和 text-shadow 的取舍有明确边界
扁平不是“去掉一切”，而是剔除拟物干扰。常见误操作是把 border-radius 直接拉到 50% 或滥用 text-shadow 模拟立体感——这两者都会破坏扁平设计的结构意图。
实际落地建议：
- 圆角优先选
2px–4px；全站统一用0也可行，但前提是 padding、font-weight、颜色对比度都配合到位 -
text-shadow在常态下禁用（包括0 1px 0 rgba(255,255,255,.9)这类“高光”写法） - 仅在
:hover或:focus时，允许极轻量的box-shadow（如0 1px 2px rgba(0,0,0,.1)），用于状态提示，而非建立深度
button 和 a 标签实现扁平按钮的语义差异
用 <button></button> 还是 <a href="..."></a>，不能只看样式像不像。语义错误会导致键盘导航失序、屏幕阅读器播报异常、甚至影响表单提交逻辑。
判断依据很简单：
- 触发 JS 行为（如弹窗、切换 tab、发 Ajax）→ 用
<button type="button"></button> - 跳转页面或锚点 → 用
<a href="..."></a>，此时需手动加role="button"和tabindex="0"才能支持空格键触发 - 提交表单 → 必须用
<button type="submit"></button>，别用a标签模拟
真正麻烦的不是写样式，而是把 appearance: none、outline、语义标签这三件事串起来——漏掉任意一环，按钮就可能在某个设备或某个用户场景里“消失”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
