方案一：

.left-list > ul li {
position:relative;
height: 1.22rem;
line-height: 1.22rem;
font-size: 0.24rem;
color: #555555;
}
.left-list > ul li:before {
content: '';
position: absolute;
left:0;
width: 200%;
height: 200%;
transform-origin: 0 0;
transform: scale(0.5);
border-style: solid;
border-width: 1px 0 0 0;
border-color: #e5e5e5;
box-sizing: border-box;
}

方案二：

nav ul li{
position:relative;
float: left;
color: #9a9a9a;
font-size: 0.24rem;
text-align: center;
padding: 3px 5px;
border-radius: 0.03rem;
margin-left: 0.21rem;
margin-bottom: 0.18rem;
}
nav ul li: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: #9a9a9a;
-webkit-border-radius: 0.12rem;
border-radius: 0.12rem;
}

方案三：

ul{
position: relative;
}
li{
height: 60px;
line-height: 60px;
padding-left: 10px;
position: relative;
font-size: 20px;
width : 20%;
height: 20%;
}
li:after{
content: "";
display: block;
position: absolute;
left: -50%;
width: 200%;
height: 1px;
background: red;
-webkit-transform:scale(0.5);
}

?0.5px 存在很多坑。只顯示下邊框的時候會存在斷點。即某個li元素邊款顯示不出來。

轉載于:https://www.cnblogs.com/lcyhappy/p/5859624.html

總結

以上是生活随笔為你收集整理的移动端0.5px的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。