使用css伪元素
移动端1像素边框处理(以下是less代码)
.adm-border-base {
position: relative;
&::before {
content: " ";
display: block;
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
border-style: solid;
border-color: var(--adm-color-border);
transform-origin: 0 0;
border-width: 0;
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
width: 200%;
height: 200%;
transform: scale(0.5);
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
width: 300%;
height: 300%;
transform: scale(0.33333);
}
}
}
.border(@pos: bottom) {
&::before {
border-@{pos}-width: 1px;
}
}
.adm-border-top{
.border(top);
}
.adm-border-right{
.border(right);
}
.adm-border-bottom{
.border(bottom);
}
.adm-border-left{
.border(left);
}
.adm-border-all{
.border(top);
.border(right);
.border(bottom);
.border(left);
}