移动端0.5px的实现

标签：

方案一：

.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元素边款显示不出来。

移动端0.5px的实现

标签：

原文地址：http://www.cnblogs.com/lcyhappy/p/5859624.html