这篇文章将为大家详细讲解有关如何解决移动端Html5页面中1px边框的问题，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
站在用户的角度思考问题，与客户深入沟通，找到沙依巴克网站设计与沙依巴克网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：
成都做网站、网站制作、企业官网、英文网站、手机端网站、网站推广、
域名注册、网页空间、企业邮箱。业务覆盖沙依巴克地区。
问题提出
这是一个比较老的问题了，我第一次注意到的时候，是UI设计师来找我麻烦，emmm那时候我才初入前端职场，啥也不懂啊啊啊啊啊，情形是这样的：
设计师拿着手机过来：这些边框都粗了啊，我的设计稿上是1px的
我：？？？？我写的是1px呀，不信你看。（说着拿出了css代码
设计师：不对啊我眼睛看来这个边框比我设计稿上粗很多，看起来好奇怪（emmm果然像素眼
我：那我把它改成0.5px你看看（边说边改了代码
设计师一看，点点头，果然好很多。
后来发现同样的代码在某些安卓机上是有问题的，会导致0.5px的线看不见。
奇了怪了，显然改成0.5px不能解决问题，但是确实1px边框看上去比设计稿上要粗很多，原因何在？
1px边框的表现
我直接使用css去定1px的边框，
html:
1
2
css:
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
margin-top: 10px;
border-bottom: 1px solid #cccccc; // 边框设置成1px
}得到的截图如下：
看上去是比设计稿上要粗很多，设计稿上的应该是下面这样的，大家可以比对一下：
解决方法一：伪类+transform
抱着解决问题的心理，虽然当时也没有想清楚原因在哪，但是还是找到了相关的解决方法，其中一些方法中提到使用边框图片border-image或者box-shadow，也可以模拟出想要的1px边框效果，但是我个人觉得不通用，也不是常规解决方法。
最终选择的是使用伪类+transform方法：原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
html同上
css如下：
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
border:none;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}这样的话，画出的线确实细很多，我在之后长达一年的时间里面一般都是使用上面的方法去解决1px边框的问题，但用着用着，我发现了几个问题：
1.为什么是scaleY(0.5)？这个0.5是怎么得出的？是不是所有机型都是要scale缩小到一半，换句话说是不是通用？
2.如果我要同时画一个容器的四个边框怎么办？
3.支不支持圆角边框？
后两个问题改造一下上面的代码，可以找到解决方法(为了方便查看效果，我把平时写法得出的效果和使用伪类得出的效果放一起，这样更容易看出差别)：
移动端1px边框问题
粗线
1
2
细线
3
4
