1、使用伪类 + transform
<!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>
示例写法：
注意，after的元素，cell,必须相对定义，伪元素，绝对定位。
<div class="cell border-1px"> cell <div>
<style>
.cell {
width: 100px;
height: 100px;
position: relative;
}
<!--全部边框-->
.border-1px:after {
content: '';
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid #000;
border-radius: 4px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: top left;
}
<!--单边框，以上边框为例-->
.border-1px-top:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
border-top: 1px solid red;
transform: scaleY(.5);
transform-origin: left top;
}
<!--单边框，以下边框为例-->
.border-1px-bottom:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-bottom: 1px solid red;
transform: scaleY(0.5);
-webkit-transform-origin: top left;
transform-origin: 0 0;
}
</style>
参考：
https://segmentfault.com/a/1190000015736900
原创文章 103
获赞 128
访问量 3万+