Retina屏1px边框解决方案-优快云博客

一直以来我们实现边框的方法都是设置 border: 1px solid #ccc ，但是在 retina 屏上因为设备像素比的不同，边框在移动设备上的表现也不相同： 1px 可能会被渲染成 1.5px, 2px, 2.5px, 3px....，在用户体验上略差，所以现在要解决的问题就是在 retina 屏幕实现 1px 边框。

有以下几种方式：

1、transform: scale(0.5) ——推荐

实现方式：

height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;

优点：
圆角无法实现，hack代码多，实现4条边框比较闹心。

缺点：
只能单独使用。
4条框：

.border-4:before {
    content: " ";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #E5E5E5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
}

2、通过viewport + REM的方式来兼容。

目前这种兼容方案相对比较完美，适合新项目（老项目改用REM单位成本会比较高）。
在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">

3、 box-shadow

实现方式：
利用css 对阴影处理的方式实现0.5px的效果。
底部一条线

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

优点：
基本所有场景都能满足，包含圆角的button，单条，多条线。

缺点：
颜色不好处理，黑色 rgba(0,0,0,1) 最浓的情况了。有阴影出现，不好用。

4、background-image

实现方式：
设置1px通过css 实现的image，50%有颜色，50%透明。

.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

优点：
配合background-image,background-size,background-position 可以实现单条，多条边框。边框的颜色随意设置。

缺点：
如果有圆角的效果，很sorry 圆角的地方没有线框的颜色。都要写的代码也不少。

5、用图片

实现方式：

.border-image{
    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
    border-width: 0px 0px 1px;
}