移动端的0.5px
最近写移动端页面写的比较多，边边基本上都是用的1px，视觉上也确实有点小粗，这不闲下来啦，具体的研究了下0.5px是怎么实现的，切记，这个效果只有在手机上才能看到效果的
利用了css3的缩放效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0.5px</title>
</head>
<style>
.content{
position:relative;
width: 200px;
height: 200px;
background: #eee;
}
.content:before{
content: '';
position: absolute;
width: 200%;
height: 1px;
bottom: 0;
border-bottom: 1px solid red;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(.5,.5);
transform: scale(.5,.5);
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.bd-all{
position:relative;
margin-top: 10px;
}
.bd-all:after{
content: " ";
position: absolute;
left: 0;
top: 0;
z-index:-1;
width: 200%;
height:200%;
border:1px solid #e0e0e0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(.5, .5);
transform: scale(.5, .5);
}
</style>
<body>
<div class="content"></div>
<!-- 四周都是0.5px的 -->
<div class='bd-all'>你好</div>
</body>
</html>
如有错误之处，请评论中之出，谢谢指出错误的亲们
欢迎加入前端开发交流群：qq：143206839
