CSS3實現0.5px邊框

大魔王薩格拉斯發表於2016-07-22

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

 

相關文章