1px边框解决方案总结

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;”）

<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

利用阴影来模拟边框

.border-1px{
  box-shadow: 0px 0px 1px 0px red inset;
}
复制代码

2倍屏

3倍屏幕

border-image

弄出1px像素边框的实质是弄出0.5px这样的边框，因此咱们能够利用相似于这样的图片，使得“border-image-slice”为2，那么实际上边框有一半是透明的，便可获得咱们想要的“1px边框”

<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细线解决方案总结
• 再谈Retina下1px的解决方案
• 7 种方法解决移动端 Retina 屏幕 1px 边框问题