CSS，高度使边框颜色改变

Question

有时候CSS在chrome中表现得很怪异，两个div之间的区别只是height参数，结果是：边框颜色不同。

body {
background: black;
}

#div1 {
    border: 1px solid white;
    height: 41px;
    width: 100px;
    transform: rotateZ(270deg);
    transform-origin: right;
}

#div2 {
    border: 1px solid white;
    height: 40px;
    width: 100px;
    transform: rotateZ(270deg);
    transform-origin: right;
}

<div id="div1">

</div>

<br><br><br><br><br><br>

<div id="div2">

</div>

PS：我正在使用100％缩放的Chrome浏览器

结果：

Answer 1

这实际上是一个消除锯齿的问题。 1px边框位于两个像素之间，从而产生这种灰色外观。

为直观起见，我为您制作了一个屏幕截图，放大并在其上方放置了网格：

在转换对象时要牢记这一点。