原因：由于现在的手机几乎都是retina屏，css设置的1px会被渲染成2px的物理像素（针对像素比等于2的屏幕），因此看起来会比较粗。
方案：
- 直接设置0.5px
ios8+可以识别浮点类型的单位，因此可以渲染这个0.5px。然而，绝大部分的android机是不支持浮点类型单位的。所以这种方案pass...
- 利用背景图
不管是border-image，还是background-image，图片的弊端还是很明显的：想改变颜色就必须要换图片，而且利用图片也比较麻烦。所以不推荐这种方案...
- viewport+rem实现
同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2时，输出viewport：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio = 3时，输出viewport：
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。对于这种方案，可以看看《使用Flexible实现手淘H5页面的终端适配rem自适应布局》
- 多背景渐变实现
与background-image方案类似，只是将图片替换为css3渐变。设置1px的渐变背景，50%有颜色，50%透明。
.background-gradient-1px {
background:
linear-gradient(#000, #000 100%, transparent 100%) left / 1px 100% no-repeat,
linear-gradient(#000, #000 100%, transparent 100%) right / 1px 100% no-repeat,
linear-gradient(#000,#000 100%, transparent 100%) top / 100% 1px no-repeat,
linear-gradient(#000,#000 100%, transparent 100%) bottom / 100% 1px no-repeat}
/* 或者 */
.background-gradient-1px{
background:
-webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) left / 1px 100% no-repeat,
-webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) right / 1px 100% no-repeat,
-webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) top / 100% 1px no-repeat,
-webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) bottom / 100% 1px no-repeat}
这种方案显示是比较牛的，不仅实现了1px的边框，还能实现多条边框。缺点就是不能实现圆角的1px边框，浏览器的兼容性也要考虑...
5、伪类 + transform 实现
个人认为伪类+transform是比较完美的方法。利用:before或者:after 实现 border ，并transform 的 scale缩小一半，将border绝对定位。
单条border样式设置：
.scale-1px{
position: relative;
border:none;
}.scale-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
4条border的实现：
.scale-1px{
position: relative;
margin-bottom: 20px;
border:none;
}.scale-1px:after{
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
或者：
.scale-1px:after{
content:'';
position:absolute;
border:1px solid #000;
top:-50%;
right:-50%;
bottom:-50%;
left:-50%;
-webkit-transform:scale(0.5);
transform:scale(0.5);
}
