CSS - 使用变换：翻译使黑色边框变成灰色答案

【问题标题】：CSS - using transform: translate makes black borders grey-ishCSS - 使用变换：翻译使黑色边框变成灰色
【发布时间】：2019-07-15 16:08:26
【问题描述】：

我有一个具有多个 div 子元素的 div。当我应用“转换：翻译（-50%，-50%）；”它确实会改变它，但黑色边框会变成灰色。

当我在开发工具中禁用转换属性时，边框是我希望它们具有的 1px 纯黑色。

#wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    border: 1px solid black;
    border-radius: 0 0.5em 0.5em;
    box-shadow: 5px 10px 8px #888888;
    overflow: hidden;
}

<div id="wrapper">
  <!-- More children -->
</div>

我想翻译元素并保留我的 1px 纯黑色边框。

使用变换它看起来像这样：如果没有转换（以及它应该如何），它看起来像这样：

【问题讨论】：

你能展示一个子元素 CSS 的例子吗？

标签： html css

【解决方案1】：

为了理解发生了什么，当您将transform: translate.. 应用于一个元素时，它将从呈现为vector 转换为pixel。这使它看起来像grey-ish。

您可以将其包装在容器中并使用flex，而不是应用transform: translate..：

section{
 display: flex;
 justify-content: center;
}

#wrapper {
    width: 60%;
    border: 1px solid black;
    border-radius: 0 0.5em 0.5em;
    box-shadow: 5px 10px 8px #888888;
    overflow: hidden;
    height: 80px;
}

<section>
<div id="wrapper">
  <!-- More children -->
</div>
</section>

【讨论】：

我只是添加了高度以便更容易看到边框，默认情况下高度将始终根据您的内容扩展
这行得通，只是添加了一个“text-align: center;”到部分标签。谢谢！

【解决方案2】：

这取决于您转换的元素的高度。如果它的高度为偶数个像素，则变换移位将是整数个像素。如果 is 是奇数像素高度，则偏移量将是整数加上二分之一像素。

这将导致亚像素渲染。根据浏览器的不同，一个像素的清晰边框线将被消除锯齿（例如 Chrome 会，Firefox 不会）。

这是一个例子：

.wrapper {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateX(0) translateY(-50%);
    width: 40%;
    border: 1px solid black;
    border-radius: 0 0.5em 0.5em;
    box-shadow: 5px 10px 8px #888888;
    overflow: hidden;
  
    line-height: 20px;
    padding: 5px;
}
#wrapper-2 {
  left: 55%;
  line-height: 21px;;
}

<div class="wrapper" id="wrapper-1">
  <p>line-height: 20px;</p>
</div>
<div class="wrapper" id="wrapper-2">
  <p>line-height: 21px;</p>
</div>

解决方案是：
正如 Ethan Vu 所说：使用不同的居中方法，例如 flex。
或者通过JS重新计算变换。

"use strict";
Array.from(document.getElementsByClassName('wrapper'))

  .forEach(el => {
    // this calculates the Y-position of the element and checks, whether it is N.0 or N.5 pixels (N is integer)
    if ((el.getBoundingClientRect().y*2) % 2) {
      // shift class will calculate the transform with an calculated offset od 0.5 pixels
      el.classList.add('shift')
    }
  })

.wrapper {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateX(0) translateY(-50%);
    width: 40%;
    border: 1px solid black;
    border-radius: 0 0.5em 0.5em;
    box-shadow: 5px 10px 8px #888888;
    overflow: hidden;
  
    line-height: 20px;
    padding: 5px;
}
.wrapper.shift {
    transform: translateX(0) translateY(calc(-50% + .5px));
}
#wrapper-2 {
  left: 55%;
  line-height: 21px;;
}

<div class="wrapper" id="wrapper-1">
  <p>line-height: 20px;</p>
</div>
<div class="wrapper" id="wrapper-2">
  <p>line-height: 21px;</p>
</div>

【讨论】：