移动端安卓手机不能识别border 0.5px解决方案

由于安卓手机无法识别border 0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现,
原理:将伪元素的宽设为200%,height设为1px通过-webkit-transform:scale(.5)来进行缩小一倍,这样就得到border为0.5的边框,
案例:
.ce{
position: relative;
}
.ce:after{
content: "";
display: block;
position: absolute;
left: -50%;
width: 200%;
height: 1px;
background: #ccc;
-webkit-transform:scale(0.5);
}
ce:为需要加边框的dom元素;

posted @ 2018-06-28 15:01  伟丶那个哥  阅读(557)  评论(0编辑  收藏  举报