按钮默认边框需同时清除border、background、outline及appearance属性，仅用border: none无效；“灰边”常因背景色、box-shadow或box-sizing导致；可访问性要求慎用outline: none，推荐:focus-visible方案。

button默认边框去不掉？先确认是否被user-agent样式覆盖

浏览器自带的 button 样式（user-agent stylesheet）会加 border、background、padding，光写 border: none 有时没反应，是因为优先级不够或被其他规则干扰。

• 用开发者工具检查元素，看 border 和 background 是否真的被覆盖，还是被 !important 或更高权重的选择器压住了
• 必须同时重置 border、background、outline —— 点击聚焦时的虚线框常被忽略
• 某些浏览器（如 Safari）对 button 的 appearance 有强干预，需显式设为 none

最简可靠写法：border-none + background-transparent + outline-none

别只依赖 border: none，它只管边框；按钮“看起来还有边”往往是因为背景色或焦点轮廓在作怪。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• border: none 必须配合 background: transparent，否则默认灰色背景仍存在
• 加上 outline: none 防止键盘聚焦时出现难看的虚线（但注意可访问性：建议用 :focus-visible 替代全局移除）
• 推荐写法：

  button {
    border: none;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

为什么用了border-none还是有“灰边”？检查box-sizing和父容器

所谓“灰边”不一定是边框，很可能是 background 渐变残留、父元素 box-shadow 溢出，或 box-sizing 导致内边距渲染异常。

• 检查是否误用了 background-color: #fff 而非 transparent，白色背景在深色页面下会凸显“边界感”
• 确认没有继承父级的 box-shadow 或 filter: drop-shadow()
• box-sizing: border-box 下若设了 padding 但没清 border，视觉上仍像有边——此时 border: 0 比 none 更稳妥

React/Vue里按钮失焦后边框重现？别漏掉:focus-visible处理

现代框架中用户可能用键盘操作，直接删 outline 会破坏可访问性，屏幕阅读器和键盘用户会找不到当前焦点。

• 不要无脑加 outline: none，改用：

  button:focus:not(:focus-visible) {
    outline: none;
  }
  button:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
  }

• Vue 中若用 @click.prevent 但没处理键盘回车/空格，button 仍会触发原生行为并带 focus 样式
• React 中自定义组件若用 div 模拟按钮，记得加 role="button" tabIndex={0}，否则根本不会触发 :focus-visible

CSS里按钮的“默认边框”不是单一属性控制的，它是 border + background + outline + appearance 共同作用的结果。少清一个，就可能在某个浏览器或交互状态下露馅。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！