移动端web开发，无可避免会遇到1px边框问题，有很多解决方案，但也各有优劣。

retina屏样式，可以放在一个媒体查询里~

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /*相关retina屏css*/
}

下面所有方法都是通过CSS重构border，让视觉看起来是一个细边框，所以原有的border必须设置为none或0

如果边框还带圆角，支持的都不是特别好~

1、利用background-image渐变、base64图片、svg图片

background-size和background-size都必须要设置。

/*4边框*/
.border-bg-4 {
    border-radius: 0;
    border: 0;
    background-image:
        -webkit-linear-gradient(top, transparent 50%, #d9d9d9 50%),
        -webkit-linear-gradient(bottom, transparent 50%, #d9d9d9 50%),
        -webkit-linear-gradient(left, transparent 50%, #d9d9d9 50%),
        -webkit-linear-gradient(right, transparent 50%, #d9d9d9 50%);
    background-image: 
        linear-gradient(to top,transparent 50%,#d9d9d9 50%),
        linear-gradient(to bottom, transparent 50%, #d9d9d9 50%),
        linear-gradient(to left, transparent 50%, #d9d9d9 50%),
        linear-gradient(to right, transparent 50%, #d9d9d9 50%);
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
    background-position: top center, bottom center, top left, right center;
    background-repeat: no-repeat;
}
/*1上边框*/
.border-bg-top {
    border-radius: 0;
    border-top: 0;
    background-image:
        -webkit-linear-gradient(top, transparent 50%, #d9d9d9 50%);
    background-image: 
        linear-gradient(to top,transparent 50%,#d9d9d9 50%);
    background-size: 100% 1px;
    background-position: top center;
    background-repeat: no-repeat;
}
/*利用base64图片*/
/*这里用到了两张图片的base64，上下是同一张图片，左右是同一张图片*/
.border_bg-img {
    border: 0;
    border-radius: 0;
    background-image: url(data:image/gif;base64,R0lGODlhAQACAJEAAAAAAP///9nZ2f///yH5BAEAAAMALAAAAAABAAIAAAIC1AoAOw==)/*上*/,
        url(data:image/gif;base64,R0lGODlhAQACAJEAAAAAAP///9nZ2f///yH5BAEAAAMALAAAAAABAAIAAAIC1AoAOw==)/*下*/,
        url(data:image/gif;base64,R0lGODlhAgABAJEAAAAAAP///9nZ2f///yH5BAEAAAMALAAAAAACAAEAAAIC1AoAOw==)/*左*/,
        url(data:image/gif;base64,R0lGODlhAgABAJEAAAAAAP///9nZ2f///yH5BAEAAAMALAAAAAACAAEAAAIC1AoAOw==)/*右*/;
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
    background-position: top center, bottom center, left top, right center;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
/*利用svg*/
.border-svg-4 {
    border: none;
    border-radius: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#d9d9d9' x='0' y='0' width='100%' height='0.5' /></svg>"), /*bottom*/
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='100%'><rect fill='#d9d9d9' x='0' y='0' width='0.5' height='100%' /></svg>"), /*left*/
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='100%'><rect fill='#d9d9d9' x='0' y='0' width='0.5' height='100%' /></svg>"), /*right*/
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#d9d9d9' x='0' y='0' width='100%' height='0.5' /></svg>")/*top*/
    ;
    /*bottom,left,right,top position*/
    background-position: 0 100%, 0 0, 100% 0, 100% 0;
    background-repeat: no-repeat;
}
.border-svg-bottom {
    border-bottom: 0 none;
    border-radius: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#d9d9d9' x='0' y='0' width='100%' height='0.5' /></svg>");
    /*bottom*/
    background-position: 0 100%;
    background-repeat: no-repeat;
}
.border-svg-top {
    border-top: 0 none;
    border-radius: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#d9d9d9' x='0' y='0' width='100%' height='0.5' /></svg>");
    /*top position*/
    background-position: 100% 0;
    background-repeat: no-repeat;
}

svg的坐标计算是从左上角开始的~

2、利用伪类元素及transform:scale（推荐）

原理就是利用这里的before伪元素，相对父级绝对定位，重构边框

/*4边框，关键在于 height:200% */
.border-scale-4-1px {
    position: relative;
    border: 0;
    border-radius: 0;
}
.border-scale-4-1px:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    border: 1px solid #d9d9d9;
    height: 200%;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*1上边框，可以不设置height*/
.border-scale-top-1px {
    position: relative;
    border-top: 0;
    border-radius: 0;
}
.border-scale-top-1px:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    border-top: 1px solid #d9d9d9;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}