console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>retina</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
line-height:1.5;
padding:20px 50px;
background:#fff;
color:#258;
}
div,h2{
margin-top:30px;
}
h3{
margin-top:10px;
}
.retina{
border-bottom:1px solid;
}
.retina-scale{
position:relative;
}
.retina-scale:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:0;
border-bottom:1px solid;
transform:scaleY(.5);
transform-origin:center bottom;
}
.retina-background-size{
background:-webkit-linear-gradient(bottom,currentColor 50%,transparent 50%) no-repeat center bottom/100% 1px;
}
.retina-border{
border-bottom:.5px solid;
}
.transform-translate{
position:relative;
width:300px;
min-height:200px;
border:#f60 2px solid;
}
.transform-translate span{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:#000;
color:#fff;
}
</style>
</head>
<body>
<div class="retina">
正常不处理的边框
</div>
<div class="retina-scale">
方法：transform:scale(.5)
</div>
<div class="retina-background-size">
方法：background-size(100% 1px)
</div>
<div class="retina-border">
方法：border:0.5px
</div>
<h2>总结：</h2>
<h3>scale处理：</h3>
<p>优点：兼容性好</p>
<p>缺点：颜色会丢失，需要单独图层来处理</p>
<h3>background-size:100% 1px处理：</h3>
<p>优点：兼容性好，颜色不会丢失，可以实现单条、多条边框</p>
<p>缺点：不支持圆角，代码比较复杂</p>
<h3>border:0.5px处理：</h3>
<p>优点：简单，不需要过多代码，支持圆角</p>
<p>缺点：颜色会丢失，兼容性差无法兼iOS 8 以下设备</p>
<p>
<img src="http://cdn.gulugulu.cn/phpcms/hxjh2/images2/index_perfeck_dl.png" width="118"/>
<img src="http://cdn.gulugulu.cn/phpcms/hxjh2/images2/index_tab_dl.png" width="118"/>
</p>
<p>
<img src="http://cdn.gulugulu.cn/phpcms/hxjh2/images2/index_perfeck_dl.png" width="59"/>
<img src="http://cdn.gulugulu.cn/phpcms/hxjh2/images2/index_tab_dl.png" width="59"/>
</p>
<p>
<img src="http://cdn.gulugulu.cn/phpcms/hxjh2/images2/index_perfeck_dl.png" width="36"/>
<img src="http://cdn.gulugulu.cn/phpcms/hxjh2/images2/index_tab_dl.png" width="36"/>
</p>
<div class="transform-translate">
<span>未知元素水平居中</span>
</div>
<div class="transform-translate">
<span>未知元素水平居中未知元素水平居中</span>
</div>
</body>
</html>