原因：由于現(xiàn)在的手機幾乎都是retina屏污筷，css設置的1px會被渲染成2px的物理像素（針對像素比等于2的屏幕），因此看起來會比較粗。
方案：
- 直接設置0.5px
ios8+可以識別浮點類型的單位，因此可以渲染這個0.5px。然而榨了，絕大部分的android機是不支持浮點類型單位的。所以這種方案pass...
- 利用背景圖
不管是border-image攘蔽，還是background-image龙屉，圖片的弊端還是很明顯的：想改變顏色就必須要換圖片，而且利用圖片也比較麻煩满俗。所以不推薦這種方案...
- viewport+rem實現(xiàn)
同時通過設置對應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實現(xiàn)手淘H5頁面的終端適配rem自適應布局》
- 多背景漸變實現(xiàn)
與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}
這種方案顯示是比較牛的，不僅實現(xiàn)了1px的邊框凉夯，還能實現(xiàn)多條邊框货葬。缺點就是不能實現(xiàn)圓角的1px邊框，瀏覽器的兼容性也要考慮...
5劲够、偽類 + transform 實現(xiàn)
個人認為偽類+transform是比較完美的方法扇苞。利用:before或者:after 實現(xiàn) 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的實現(xiàn)：
.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);
}
