Retina 下的真 1px 的东东现在常见的实现无非就是

1. 图片
2. 阴影
3. 缩放

每种都有各自的用处。

前段时间写了个“软图片”的实现

.border {
  background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
  linear-gradient(270deg, red, red 50%, transparent 50%),
  linear-gradient(0deg, red, red 50%, transparent 50%),
  linear-gradient(90deg, red, red 50%, transparent 50%);
  background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
  padding: 10px;
}

缺点就是使用背景，使用时可能要配合padding，性能其实测试过，没啥影响。

同样的方式也可以搞定分割线，细细滴会好看好多滴。

.border {
  background-image:linear-gradient(180deg, #ccc, #ccc 50%, #fff 50%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
}

扩展阅读：Yes We Can Do Fraction Of A Pixel