半转的意思是借鉴参考，搬砖，加了一些自己的想法。
在移动端里，因为存在2倍像素的问题，所以很多时候，移动端上的1px边框并不是意义上的。从下图红色框看到dpr：2.0 ，表示1px等于2倍的物理像素。
网上找了一下，自己总结了一下。
实现方法代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>1px的边框问题</title>
<style type="text/css">
.line {
height: 50px;
width: 200px;
line-height: 50px;
background-color: #CCC;
text-align: center;
border-bottom:1px solid red;
margin-bottom: 20px;
} .scale {
height: 50px;
width: 200px;
line-height: 50px;
background-color: #CCC;
text-align: center;
margin-bottom: 20px;
}
.scaleV2 {
height: 50px;
width: 200px;
line-height: 50px;
text-align: center;
background-color: #CCC;
margin-bottom: 20px;
border-radius: 5px; }
.topLine,.bottomLine,.leftLine,.rightLine,.borderLine,.radiusLine{
position: relative;
}
.bottomLine:after {
position: absolute;
content: '';
width: 200%;
left: 0;
bottom: 0;
height: 1px;
padding-bottom: 1px;
background-color: red;
-webkit-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
.topLine:after {
position: absolute;
content: '';
width: 200%;
left: 0;
top: 0;
height: 1px;
background-color: red;
-webkit-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
.leftLine:after {
position: absolute;
content: '';
width: 1px;
left: 0;
top: 0;
height: 200%;
background-color: red;
-webkit-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: left bottom;
transform-origin: left top;
}
.rightLine:after {
position: absolute;
content: '';
width: 1px;
right: 0;
top: 0;
height: 200%;
background-color: red;
-webkit-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: center bottom;
transform-origin: right top;
} .borderLine:after {
position: absolute;
content: '';
width: 200%;
left: 0;
top: 0;
height: 200%;
border: 1px solid red;
-webkit-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: left top;
transform-origin: left top;
} .radiusLine:after {
position: absolute;
content: '';
width: 200%;
left: 0;
top: 0;
height: 200%;
border: 1px solid red;
border-radius: 10px;
-webkit-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
</style>
</head> <body>
<div class="line">1px</div>
<div class="scale topLine">0.5px 上边框</div>
<div class="scale bottomLine">0.5px 下边框</div>
<div class="scale leftLine">0.5px 左边框</div>
<div class="scale rightLine">0.5px 右边框</div>
<div class="scale borderLine">0.5px 边框</div>
<div class="scaleV2 radiusLine">0.5px 圆角边框</div>
</body> </html>
其实还是发现有一些的问题。
就是在在圆角的情况下会有写漏空。
看了一个大神的博客，他是用这样的一种方法的。没有这样的问题。
.btn:before {
content: '';
position: absolute;
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border-style: solid;
border-width: 1px;
border-color: red;
-webkit-border-radius: 10px;
border-radius: 10px;
}
实现.5px的圆角边框
.5px的边框，看起来看神奇，这里感谢蓝叔提供的方法。
原理：先定义1px的圆角边框，然后拉伸内容的宽度和高度为父级的2倍(边框厚度不变)，然后再使用transform:scale(0.5)缩放为原来的0.5倍