width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
这样的话，画出的线确实细很多，我在之后长达一年的时间里面一般都是使用上面的方法去解决1px边框的问题，但用着用着，我发现了几个问题：
1.为什么是scaleY(0.5)？这个0.5是怎么得出的？是不是所有机型都是要scale缩小到一半，换句话说是不是通用？
2.如果我要同时画一个容器的四个边框怎么办？
3.支不支持圆角边框？
后两个问题改造一下上面的代码，可以找到解决方法(为了方便查看效果，我把平时写法得出的效果和使用伪类得出的效果放一起，这样更容易看出差别)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
<title>移动端1px边框问题</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.lines {
width: 200px;
margin: 0 auto;
}
.lines li {
border: 1px solid #cccccc;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 13px;
margin-top: 10px;
}
.hairlines {
width: 200px;
margin: 0 auto;
border-radius: 3px;
}
.hairlines li{
height: 50px;
line-height: 50px;
border:none;
text-align: center;
position: relative;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
top: 0;
border: 1px solid #cccccc;
border-radius: 26px;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
</style>
</head>
<body>
粗线
<ul class="lines">
<li>1</li>
<li>2</li>
</ul>
细线
<ul class="hairlines">
<li>3</li>
<li>4</li>
</ul>
</body>
</html>这样得出的效果图如下：
下面的边框明显细很多，更贴近于设计稿。
那么“1.为什么是scaleY(0.5)？这个0.5是怎么得出的？是不是所有机型都是要scale缩小到一半，换句话说是不是通用？”这个问题该怎么回答呢？
这就要回到问题的本质，为什么我明明在css里面写了1px，但是仍然会出现“看起来比平时要粗很多的效果”？
