必须显式设置 appearance: none含 -webkit-appearance: none 和 -moz-appearance: none才能真正清空默认样式之后需手动补全 border、padding、background并用 inline-flex 实现文字垂直居中同时组合 :active 和 :focus-visible 控制点击阴影避免 Safari 闪烁需加 transform: translateZ(0)。button 默认 appearance 导致阴影不一致Chrome、Safari、Firefox 对 button 的默认外观渲染逻辑不同尤其在启用 box-shadow 时Safari 和旧版 Edge 会把系统级按钮边框/高光和你写的阴影叠加造成点击态阴影忽深忽浅、甚至完全被遮盖。根本原因不是 shadow 写错了而是浏览器偷偷加了一层 appearance: button或 -webkit-appearance它自带内边距、边框、背景渐变和焦点高亮干扰了你对样式的完全控制。必须显式设置 appearance: none含 -webkit-appearance: none 和 -moz-appearance: none才能真正“清空”默认样式加了 appearance: none 后border、padding、background 全部退回到 CSS 初始值务必手动补全否则按钮可能塌陷或不可见IE 不支持 appearance但 IE 本身对 box-shadow 的点击态处理较简单反而不容易出问题重点盯 Safari 和 Chrome 110启用了新表单控件渲染click 阴影该用 :active 还是 :focus-visible用户点击按钮瞬间的阴影不能只靠 :active —— 它在移动端触发后会残留iOS Safari 的 :active 持续到 touchend 后且键盘用户按 Space/Enter 时不会触发 :active导致可访问性断裂。真正可靠的方案是组合使用立即学习“前端免费学习笔记深入”:active 处理鼠标/触屏按下瞬间视觉反馈要快延迟 ≤ 0ms:focus-visible 覆盖键盘操作且只在用户明显需要焦点指示时生效避免鼠标用户看到多余轮廓两者都加 box-shadow但参数保持一致例如box-shadow: 0 2px 6px rgba(0,0,0,0.15)别忘了加 transition: box-shadow 0.1s ease否则阴影突兀跳变appearance: none 后按钮文字垂直居中失效清除默认外观后line-height 和 vertical-align 对齐逻辑回归标准块级行为但按钮内部文字常因字体度量ascent/descent差异在 Firefox 或某些字体下偏上或偏下。 NameGPT名称生成器 免费AI公司名称生成器AI在线生成企业名称注册公司名称起名大全。