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

移动端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会造成线条模糊，不太美观。

巴特西

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

最新文章

热门文章