BFE.devAI解答 - 前端面试问题
113. 如何实现retina hairline(0.5px line in CSS)?

可以通过CSS中使用均匀的渐变来模拟retina hairline。具体实现方式如下：

.hairline {
  position: relative;
}
.hairline:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0.5px; /* 对于retina设备，使用0.5px */
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #000, transparent);
}

在上述CSS代码中，after伪元素会用渐变来模拟出更细的线条，可以通过调整渐变中的颜色和方向来实现不同效果。同时，需要注意对于retina设备，需要使用0.5px而非1px。