解决CSS移动端1px边框问题

移动项目开发中，安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示，网上搜了一下，解决方法如下：

一、利用css中的transform的缩放属性解决，推荐这个。如下面代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>解决1px边框问题</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

    <style>

        .line {position:relative;}

        .line:after {width:%;height:%;position:absolute;top:;left:;z-index:;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin: ;transform:scale(0.5);transform-origin: ;}

        .list {width:%;margin:auto;list-style:none;padding:;}

        .list:after {border:1px solid #ccc;border-radius:10px;}

        .item {padding:10px;}

        .item:after {border-bottom:1px solid #ccc;}

        .item:last-child:after {display:none;}

    </style>

</head>

<body>

<ul class="list line">

    <li class="item line">item001</li>

    <li class="item line">item002</li>

    <li class="item line">item003</li>

    <li class="item line">item004</li>

    <li class="item line">item005</li>

    <li class="item line">item006</li>

    <li class="item line">item007</li>

    <li class="item line">item008</li>

    <li class="item line">item009</li>

    <li class="item line">item010</li>

</ul>

</body>

</html>

这个主要利用after伪类进行缩放。调用公共class，还是很方便的。

二、JS判断是否支持0.5px边框，是的话，则输出类名hairlines

if (window.devicePixelRatio && devicePixelRatio >= ) {

  var testElem = document.createElement('div');

  testElem.style.border = '.5px solid transparent';

  document.body.appendChild(testElem);

  if (testElem.offsetHeight == )

  {

    document.querySelector('html').classList.add('hairlines');

  }

  document.body.removeChild(testElem);

}

.hairlines .box {}

目前在用这个方法，使用很方便，无须多余的class，可惜支持的不是很好，IOS8+以上才可以。

三、box-shadow 阴影

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

最先用的就是这个方法，IOS没问题。很多安卓机显示就是坨翔，黑乎乎的描边。。

四、background-image

.border {

  background-image:linear-gradient(180deg, red, red %, transparent %),

  linear-gradient(270deg, red, red %, transparent %),

  linear-gradient(0deg, red, red %, transparent %),

  linear-gradient(90deg, red, red %, transparent %);

  background-size: % 1px,1px % ,% 1px, 1px %;

  background-repeat: no-repeat;

  background-position: top, right top,  bottom, left top;

  padding: 10px;

    }

也能实现效果，使用很不方便

五、图片

.border-image{

    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==")   stretch;

border-width: 0px 0px 1px;

}

显示效果有点模糊，而且万一以后要修改个颜色，那不坑爹了。

所以，目前推荐第一种方法。

秒客网