1px问题产生的原因

从移动端的角度说个具体的场景，以iphone6为例。

iphone6的屏幕宽度为375px，设计师做的视觉稿一般是750px，也就是2x，这个时候设计师在视觉稿上画了1px的边框，于是你就写了“border-width:1px”，so…1px边框问题产生了。

对设计师来说它的1px是相对于750px的（物理像素），对你来说你的1px是相对于375px的（css像素）“实际上你应该是border-width:0.5px”。

具体方案

知道了问题产生的原因，辣么就好弄解决方案啦，O(∩_∩)O。

用小数写边框

媒体查询，加小数的写法

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

优点：方便噻
缺点: 安卓与低版本IOS不适用, 这个或许是未来的标准写法

tranform加伪类标签

利用伪类标签，更具父级定位，大小更具媒体查询缩放实现效果（注意别忘记了“transform-origin: left top;”）

1	<span class="border-1px">1像素边框问题</span>

// less
.border-1px{
  position: relative;
  &::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border:1px solid red;
    color: red;
    height: 200%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
    @media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){
      width: 300%;
      height: 300%;
      -webkit-transform: scale(0.33);
      transform: scale(0.33);
    }
  }
}

需要注意input button是没有:before, :after伪元素的

优点: 其实不止是圆角, 其他的边框也可以这样做出来

缺点: 代码量也很大, 占据了伪元素, 容易引起冲突

box-shadow

利用阴影来模拟边框

1
2
3

.border-1px{
  box-shadow: 0px 0px 1px 0px red inset;
}

2倍屏

3倍屏幕

border-image

弄出1px像素边框的实质是弄出0.5px这样的边框，所以我们可以利用类似于这样的图片，使得“border-image-slice”为2，那么实际上边框有一半是透明的，即可得到我们想要的“1px边框”

1
2
3

<div class="test">
    1像素边框
</div>

.test{
    border: 1px solid transparent;
    border-image: url('./border-1px.png') 2 repeat;
}

修改颜色麻烦, 需要替换图片
圆角需要特殊处理，并且边缘会模糊

background

这方法基本不用（麻烦O(∩_∩)0），不过还是记录一下

.background-image-1px {
background: url(../img/line.png) repeat-x left bottom;
-webkit-background-size: 100% 1px;
background-size: 100% 1px;
}

总结

从兼容性和灵活性来考虑，个人还是推荐tranform加伪类标签的写法，节约时间成本。

1px边框解决方案总结