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 边框位于两个像素之间，导致颜色看起来呈灰色。

为了形象化这一点，我为您截取了屏幕截图，放大并在其上放置了网格：

变换对象时请记住这一点。