如何消除按钮背景色与边框之间的白色像素？

按钮边框和背景色之间出现白色像素，背景未完全填充按钮区域，调整button::before尺寸后仍未解决。

问题原因 #

按钮设置了2px的黑色边框，默认情况下::before伪元素的宽高仅覆盖按钮的内容+内边距区域，无法延伸到边框部分，导致边框内侧露出按钮本身的浅灰色背景（#e7e7e7），形成视觉上的白色像素缝隙。

解决方法 #

修改button::before的定位和尺寸，让它向外扩展与边框宽度一致的距离，完全覆盖边框区域：

修改后的完整代码 #

CSS

button {
  border: 2px solid #000;
  border-radius: 100px;
  overflow: hidden;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  background: #e7e7e7;
  padding: 1.5rem 3rem;
  margin: 0;
  position: relative;
  display: inline-block;
}

button p {
  padding: 0;
  margin: 0;
  font-family: "ClashGrotesk-Medium";
  font-size: 3em;
  position: relative;
  mix-blend-mode: difference;
}

button::before {
  position: absolute;
  /* 向外扩展2px，覆盖整个按钮（包括边框） */
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 100px;
  content: "";
  background: #000;
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

button:hover::before {
  transform: translate3d(0, -100%, 0);
}

HTML

<button>
  <p>Lorem Ipsum</p>
</button>

原理说明 #

通过top: -2px和left: -2px让伪元素向左上偏移，再用calc(100% + 4px)把宽高各增加4px（左右/上下各2px），刚好覆盖按钮的2px边框区域，彻底消除边框与背景间的白色缝隙。

内容的提问来源于stack exchange，提问作者Silas Kierstein