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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM