作者:Nedo_zou | 来源:互联网 | 2023-05-18 05:28
手机上的边框,1px的宽度已经无法满足需求了,0.5px的需求应用而生。做法:利用伪类,做一个长宽200%,1px宽度的边框,再缩小至0.5倍。div{position:relative;
手机上的边框,1px的宽度已经无法满足需求了,0.5px的需求应用而生。
做法:
利用伪类,做一个长宽200%,1px宽度的边框,再缩小至0.5倍。
div {
position: relative;
}
div:before {
content: '';
position: absolute;
left: 0;
top: 0;
border: 1px solid #fff;
border-width: 0 0 1px;
width: 200%;
height: 200%;
transform: scale(.5, .5);
box-sizing: border-box;
transform-origin: 0 0;
}
这样就是底0.5px的边框了;
sass:
$color_border:#ddd;
$border:1px solid $color_border;
@mixin border_s($top:0, $right:0, $bottom:0, $left:0) {
position: relative;
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
border: $border;
border-width: $top $right $bottom $left;
width: 200%;
height: 200%;
transform: scale(.5, .5);
box-sizing: border-box;
transform-origin: 0 0;
}
}
.exm {
@include border_s(1px 0 1px);
}
方便复用,边框需求变幻