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