高清屏下正確顯示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)
  }
}