CSS实现1像素边框的方法？

这个问题在移动端高清屏开发里特别典型。明明写了 border: 1px solid #ccc;，在Retina屏幕上看起来却有点“发虚”或者过粗。这是因为CSS的1px对应的是逻辑像素，而屏幕的物理像素密度更高。要解决它，咱们有几个经典的老办法。

最早流行的是用 transform: scale() 来“缩放”出一条细边。通常我们会配合伪元素来实现，这样不会影响元素本身的内容和布局。比如，给元素下边框加一条细线：

.element::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

这个技巧的关键在于，我们画了一条1px高的线，然后用 scaleY(0.5) 在垂直方向把它压缩到0.5个逻辑像素，在高清屏上显示的就是更锐利的“物理1像素”。

另一个轻量的办法是用 box-shadow 来模拟边框。它也可以生成亚像素级别的阴影，从而实现极细的线条。

.box {
  box-shadow: 0 0 0 0.5px #ddd;
}

这个效果不错，但要注意，老版本安卓设备对小于1px的 box-shadow 支持可能不太好。

现在更推荐使用 CSS3 的原生方案：border-width 属性直接接受小数。在支持它的设备上，这是最简洁清晰的写法。

.cell {
  border-bottom: 0.5px solid #eee;
}

当然，最省心的可能是直接使用 viewport 的缩放方案。通过设置 <meta name="viewport"> 中的 initial-scale=0.5 等值，让整个页面的逻辑像素与物理像素对齐，这样写1px就是物理1px。但这会影响整个页面的布局尺度，通常用在专门为高清屏适配的独立页面。

选哪种方法，得看你的项目场景。如果只针对现代浏览器，直接用 0.5px 最方便。如果需要更稳健的兼容，用 transform 缩放伪元素的方法依然是可靠的选择。明白背后的原理，你就能根据情况灵活取舍了。