由于设计图的1px在移动端开发中的像素比是2倍，在实际开发中却是需要1px的线条，虽然最直接的方式是将线条设置为0.5px，但有些移动端对于0.5px的解析为0，变成了无边框的显示。因此处理该需求我们可以使用css3提供的缩放属性和伪类选择来实现1px。
例：
html:
<div class=”border”>
<div class=”content”>设置1px的边框</div>
</div>
css:
.border{
position: relative;
}
.border:after { content: ”; position: absolute; width: 200px; border-bottom: 1px solid red; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); -o-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
除了使用伪类的方式，也可以创建高度为1px的div线条，并将其缩放为0.5的线条，使用时进行位置设置。
例：html:<div class=”border”></div>css:
.border{
width:200px;
border-bottom: 1px solid #000;
transform: scaleY(0.5);
}
(*^▽^*)
