问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意,
最后找到一个还算好用的方法:伪类 + transform
原理是把原先元素的 border 去掉,然后利用:before
或者:after
重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位
单条边框:
.hairlines li{position: relative; border:none; }
.hairlines li:after{content: ''; position: absolute;left:; background:red; width: 100%;height: 1px;
-webkit-transform: scaleY(0.5);transform: scaleY(0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0; }
四条边框:
.hairlines li{position: relative; border:none; }
.hairlines li:after{content: ''; position: absolute;left:; top:0; border:1px solid red; width:200%;height:200%;
-webkit-transform: scale(0.5);transform: scaleY(0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0; }
注:可以支持圆角,唯一的一点小缺陷是<td>
用不了。