不同像素密度屏幕下实现1px边框或分割线

1px边框

//HTML
<div class="one"></div>

//CSS
.one {
  position: relative;
  width: 100px;
  height: 100px;
}
.one::after {
  content: '';
  position: absolute;

  width: 200%;/*2X*/
  width: 300%;/*3X*/


  height: 200%;/*2X*/
  height: 300%;/*3X*/

  border: 1px solid black;
  border-radius: 50%;

  transform: scale(.5);/*2X*/
  transform: scale(.333);/*3X*/

  top: 50%;/*2X*/
  top: 100%;/*3X*/

  left: 50%;/*2X*/
  left: 100%;/*3X*/
}

1px分割线

//HTML
<div class="line"></div>

//CSS
.line {
  position: relative;
  margin: 0 30px;
}
.line::after {
  content: '';
  position: absolute;
  background: black;

  width: 200%;/*2X*/
  width: 300%;/*3X*/

  height: 1px;
  top: 0;

  left: 50%;/*2X*/
  left: 100%;/*2X*/

  transform: scale(.5);/*2X*/
  transform: scale(.333);/*2X*/
}