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的邊框。