css实现0.5像素的底边框。

由于设计图的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);
}

(*^▽^*)