CSS实现0.5px的边框的两种方式

方式一

<style>
.border {
	width: 200px;
	height: 200px;
	position: relative;
}
.border::before {
  content: "";
  position: absolute;
  left:0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid blue;
  transform-origin: 0  0;
  transform: scale(0.5);
}
</style>

<div class="border"></div>

方式二

<style>
.border {
	width: 200px;
	height: 200px;
	position: relative;
}
.border::before {
	position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
	top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 1px solid blue;
    transform: scale(0.5);
}
</style>

<div class="border"></div>