CSS-使用transform：translate使黑色边框变成灰色

Question

我有一个具有multilpe div子元素的div。当我应用“ transform：translate（-50％，-50％）;”时它确实可以变形，但黑色边框变成灰色。

当我在开发工具中禁用transform属性时，边框是我希望它们具有的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>

我要翻译元素并保持1像素的纯黑色边框。

通过转换，它看起来像这样： 没有变换（及其外观），它看起来像这样：

Answer 1

为了解发生了什么，将transform: translate..应用于元素时，会将其从呈现为vector转换为pixel。这样看起来就grey-ish。

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

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>

Answer 2

这取决于您变换的元素的高度。如果其高度为偶数个像素，则变换移位将为整数个像素。如果是奇数像素高度，则移位将为整数加一半像素。

这些将有助于子像素渲染。视浏览器而定，一像素的清晰边框线会被消除锯齿（例如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>