CSS 转换在边框中显示背景颜色

Question

我有两个 <div> 元素。当用户悬停时，应用 transform: translateY(x, y); 的转换。但是，当用户悬停时，也会以某种方式出现黑色边框（应该只有红色边框）。

分辨率： 1920*1080

.link {
  display: block;
  height: 350px;
  width: 200px;
  background: black;
  border: 1px solid red;
}

.element {
  background: white;
  height: 100%;
  width: 100%;
}

.link:hover {
  transform: translateY(-5px)
}

<div class="link">
  <div class="element">
    test
  </div>
</div>

Answer 1

我不确定我是否理解了这个问题，但消除悬停时黑色的一种方法是将背景设置为透明。请参阅下面的片段。

请注意，鉴于现代显示器对一个 CSS 像素使用多个“物理”像素，因此尝试精确对齐非常细的边框/线条（在本例中为 1 CSSpx）并不总是可行的。有时放大/缩小显示/不显示 1（显示）像素“落后”。我已经在这种情况下看到了这一点，因此某些显示尺寸可能会显示黑色。

.link {
  display: block;
  height: 350px;
  width: 200px;
  background: black;
  border: 1px solid red;
}

.element {
  background: white;
  height: 100%;
  width: 100%;
}

.link:hover {
  transform: translateY(-5px);
  background: transparent;
}

<div class="link">
  <div class="element">
    test
  </div>
</div>