高清屏下正确显示1px宽度的圆角边框

直接设置border:1px solid #ccc;在手机下看会比设计稿粗，浏览器边框的最小的显示像素是1px,设置0.5px也是会渲染成1px的效果，而在css的1px根据手机的品牌或型号不同在高清屏的物理像素是2像素或者3像素

    <div class="list-wrapper border-1px">
    </div>

border-1px:after保存公用样式，list-wrapper:after 进行个性化设置，如圆角大小，边框颜色

.list-wrapper {
  width: 300px;
  height: 200px;
  margin: 100px auto;
}

.list-wrapper:after {
  border-radius: 20px;
  border-color:#ccc ;
}


.border-1px {
  position: relative
}
.border-1px:after {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;

}

@media (-webkit-min-device-pixel-ratio: 2) {
  .border-1px:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(.5);
    transform: scale(.5)
  }
}


@media (-webkit-min-device-pixel-ratio: 3) {
  .border-1px:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(.333);
    transform: scale(.333)
  }
}