移动端1px边框伪类宽高计算

时间:2022-01-02 23:29:39

移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高100%会出现问题,那么如何解决?
请看下面代码:

after:{
border: 1px solid #c1c0c0;
height: 303%;
content: '';
width: 303%;
position: absolute;
bottom: 0;
right: 0;
transform: scale(.33);
box-sizing: border-box;
transform-origin: right bottom;
-webkit-box-sizing: border-box;
-webkit-transform: scale(.33);
}

以上代码把1px边框缩放到0.33,当然这个根据实际项目需要,可灵活变动,但是高宽为什么是303%?
我总结出了以下万能公式:
1/缩放率
但是这样的结果是小数,宽高没办法直接设置成小数,所以我们要进一步换成百分比。
那上面例子来说,303%是这样得来的:
1/0.33=3.03
然后把3.03换成百分比303%。

除此之外,边框线的高度的需要注意,无论是四条边还是一条边,线条都必须是1px,不可以为0px,0px会造成线条模糊,不太美观。