CSS3实现0.5px边框

用CSS设置边框宽度为0.5px，可以使边框看起来更加细腻，特别是在移动端，设计师会有这样的要求。

但遗憾的是，大多数Android手机并不能识别0.5px。因此我们可以使用CSS3来变通的实现0.5px的边框需求。

 

.content{

   position:relative;

}

.content:before{

content: '';
position: absolute;
width: 200%;
height: 1px;
bottom: 0;
border-bottom: 1px solid #d6e4ed;
-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

}

 

大致原理是：通过CSS3插入一个伪元素，该元素宽度为父级2倍，高度为1px，然后通过css3缩放将其缩小一倍，从未实现一个0.5px的边框。