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

【问题标题】：CSS transform showing background color in borderCSS 转换在边框中显示背景颜色
【发布时间】：2021-09-18 00:06:39
【问题描述】：

我有两个 <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>

【问题讨论】：

您的小提琴没有任何问题。如果您要删除边框，则只需在悬停时删除边框border:none;
抱歉错过了添加信息，在 1920X 分辨率下面临问题。
有什么问题？
我已尝试通过编辑帮助您解决语法问题。您能否查看编辑并确保它符合您的逻辑？
您能详细说明一下 1920x 分辨率吗？你的意思是1920x1080分辨率吗？ 1920是屏幕的像素宽还是高？

标签： css css-transitions css-transforms

【解决方案1】：

我不确定我是否理解这个问题，但摆脱悬停时黑色的一种方法是将背景设置为透明。请参阅下面的 sn-p。

请注意，由于现代显示器对一个 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>

【讨论】：