css伪元素实现0.5倍边框(个人笔记)

思路：设置一个伪元素，宽高为元素的两倍，边框为1px，以元素的左上角为原点进行定位。然后伪元素整体缩小0.5倍，边框也一起缩小为0.5px。0.5倍边框实际上是伪元素的边框。

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

.border {
     width: 200px;
     height: 200px;
     background-color: skyblue;
     margin: 0 auto;
     position: relative;
}
.border::before {
     content: " ";
     width: 200%;
     height: 200%;
     position: absolute;
     top: 0;
     left: 0;
     border: 1px solid rgb(223, 8, 8);
}

image.png

.border::before {
     content: " ";
     width: 200%;
     height: 200%;
     position: absolute;
     top: 0;
     left: 0;
     border: 1px solid rgb(223, 8, 8);
     transform: scale(0.5); /*缩小0.5倍*/
}

image.png

.border::before {
     content: " ";
     width: 200%;
     height: 200%;
     position: absolute;
     top: 0;
     left: 0;
     border: 1px solid rgb(223, 8, 8);
     transform: scale(0.5);
     transform-origin: 0 0; /*默认以中心为原点，这里设置左上角为原点*/ 
}

image.png