/* 1像素边线 */

.line-w-top, .line-w-bottom, .line-h-left, .line-h-right {
position: relative;
}

.line-w-top::after, .line-w-bottom::after {
position: absolute;
content: "";
width: 100%;
height: 2rpx;
background: #ccc;
transform-origin: 50% 100%;
transform: scaleY(0.5);
}

.line-w-top::after {
top: 0;
left: 0;
}

.line-w-bottom::after {
bottom: 0;
left: 0;
}

.line-h-left::after, .line-h-right::after {
position: absolute;
content: "";
width: 2rpx;
height: 100%;
background: #ccc;
transform-origin: 100% 50%;
transform: scaleX(0.5);
}

.line-h-left::after {
top: 0;
left: 0;
}

.line-h-right::after {
top: 0;
right: 0;
}

用法是直接加class



这种方式的好处在于Android和IOS的显示效果都是一致的，可以解决在Android上无法解析0.5px的问题