1px 边框

[roojay]

原理是利用 :before 或者 :after 重做 border ，并用transform 的 scale 缩小一半，原先的元素相对定位，新做的border 绝对定位。

  .scale-1px {
    position: relative;
    border: none;
  }
  .scale-1px:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transform-origin: left bottom;
    transform: scale(0.33333333);
    width: 300%;
    height: 300%;
  }

原文链接: CSS Pixels