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

来源:互联网 发布:搜狗小说书架数据恢复 编辑:程序博客网 时间:2024/06/06 03:14
由于安卓手机无法识别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元素;