如何移除元素周围的异常轮廓？按钮样式异常问题解析

数据老陈

2026-7-7

问题

给按钮设置了如下自定义CSS样式后，按钮周围出现了异常轮廓，想知道如何移除这一轮廓，以及该问题的产生原因。

代码示例

CSS

button {
  padding: 1em;
  background: transparent;
  border: none;
}
button:focus {
  border-radius: 6px;
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px blue;
}

HTML

<button>Button</button>

异常效果

按钮周围的异常轮廓

问题原因

这个异常轮廓是部分浏览器（比如Firefox）的默认样式导致的：浏览器会给按钮的::-moz-focus-inner伪元素添加默认的边框和内边距，哪怕你给<button>本身设置了border: none，这个伪元素的默认样式依然会生效，在按钮获得焦点时显现出额外的轮廓。

解决方法

添加CSS代码重置这个伪元素的默认样式就能解决：

button::-moz-focus-inner {
  border: none;
  padding: 0;
}

同时可以补充重置::-moz-focus-outer伪元素，避免出现额外的间距问题：

button::-moz-focus-outer {
  border: none;
}

最终的完整CSS代码如下：

button {
  padding: 1em;
  background: transparent;
  border: none;
}
/* 重置Firefox默认的焦点伪元素样式 */
button::-moz-focus-inner {
  border: none;
  padding: 0;
}
button::-moz-focus-outer {
  border: none;
}
button:focus {
  border-radius: 6px;
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px blue;
}