retina屏1像素边框与普通边框对比demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>border-1px</title>
  <style>
    .border-top-1px, .border-bot-1px {
      position: relative;
    }
    .border-top-1px:before {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      border-top: 1px solid #000;
      content: '';
    }
    .border-bot-1px:after {
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      border-bottom: 1px solid #000;
      content: '';
    }
    @media (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
      .border-top-1px:before,
      .border-bot-1px:after {
        -webkit-transform: scaleY(0.66666);
        transform: scaleY(0.66666);
      }
    }
    @media (-webkit-min-device-pixel-ratio: 2),
    (min-device-pixel-ratio: 2) {
      .border-top-1px:before,
      .border-bot-1px:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
    @media (-webkit-min-device-pixel-ratio: 3),
    (min-device-pixel-ratio: 3) {
      .border-top-1px:before,
      .border-bot-1px:after {
        -webkit-transform: scaleY(0.33333);
        transform: scaleY(0.33333);
      }
    }
    div {
      width: 300px;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    div + div {
      margin-top: 50px;
    }
    .div1, .div3 {
      color: #ff433d;
      font-weight: bold;
    }
    .div2 {
      border-top: 1px solid #000;
    }
    .div4 {
      border-bottom: 1px solid #000;
    }
  </style>
</head>
<body>
  <div class="div1 border-top-1px">使用.border-top-1px类压缩</div>
  <div class="div2">普通的border-top</div>
  <div class="div3 border-bot-1px">使用.border-bot-1px类压缩</div>
  <div class="div4">普通的border-bottom</div>
</body>
</html>
@border-1px.html
retina屏1像素边框与普通边框对比demo

代码：

效果：
