原因：由于現(xiàn)在的手機(jī)幾乎都是retina屏，css設(shè)置的1px會(huì)被渲染成2px的物理像素（針對(duì)像素比等于2的屏幕），因此看起來會(huì)比較粗。

方案：

1. 直接設(shè)置0.5px

ios8+可以識(shí)別浮點(diǎn)類型的單位，因此可以渲染這個(gè)0.5px。然而，絕大部分的android機(jī)是不支持浮點(diǎn)類型單位的。所以這種方案pass...

2. 利用背景圖

不管是border-image，還是background-image，圖片的弊端還是很明顯的：想改變顏色就必須要換圖片，而且利用圖片也比較麻煩。所以不推薦這種方案...

3. viewport+rem實(shí)現(xiàn)

同時(shí)通過設(shè)置對(duì)應(yīng)viewport的rem基準(zhǔn)值，這種方式就可以像以前一樣輕松愉快的寫1px了。

在devicePixelRatio = 2時(shí)，輸出viewport：

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3時(shí)，輸出viewport：

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

這種兼容方案相對(duì)比較完美，適合新的項(xiàng)目，老的項(xiàng)目修改成本過大。對(duì)于這種方案，可以看看《使用Flexible實(shí)現(xiàn)手淘H5頁面的終端適配rem自適應(yīng)布局》

4. 多背景漸變實(shí)現(xiàn)

與background-image方案類似，只是將圖片替換為css3漸變。設(shè)置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}

這種方案顯示是比較牛的，不僅實(shí)現(xiàn)了1px的邊框，還能實(shí)現(xiàn)多條邊框。缺點(diǎn)就是不能實(shí)現(xiàn)圓角的1px邊框，瀏覽器的兼容性也要考慮...

5、偽類 + transform 實(shí)現(xiàn)

個(gè)人認(rèn)為偽類+transform是比較完美的方法。利用:before或者:after 實(shí)現(xiàn) border ，并transform 的 scale縮小一半，將border絕對(duì)定位。

單條border樣式設(shè)置：

.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的實(shí)現(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);
}