詳解css實現0.5像素邊框的方法

來源：懂視網責編：小采時間：2020-11-27 18:50:12

詳解css實現0.5像素邊框的方法

詳解css實現0.5像素邊框的方法:這篇文章主要介紹了css實現0.5像素的邊框,這里整理了詳細的代碼,非常具有實用價值，需要的朋友可以參考下公司的設計師在做設計圖的時候都是以iphone6（寬為750物理像素）為基準進行設計的。iphone6的設備像素比（即css像素與物理像素的比例）是2，所以設計師

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解css實現0.5像素邊框的方法:這篇文章主要介紹了css實現0.5像素的邊框,這里整理了詳細的代碼,非常具有實用價值，需要的朋友可以參考下公司的設計師在做設計圖的時候都是以iphone6（寬為750物理像素）為基準進行設計的。iphone6的設備像素比（即css像素與物理像素的比例）是2，所以設計師

這篇文章主要介紹了css實現0.5像素的邊框,這里整理了詳細的代碼,非常具有實用價值，需要的朋友可以參考下

公司的設計師在做設計圖的時候都是以iphone6（寬為750物理像素）為基準進行設計的。iphone6的設備像素比（即css像素與物理像素的比例）是2，所以設計師在設計圖畫了邊框為1px的box的時候，相對于css代碼來說就是0.5像素。

對于這個問題，最直觀的方法就是css直接設置邊框為0.5px，經過測試，iPhone可以正常顯示，android下幾乎所有的瀏覽器都會把0.5識別為0，即無邊框狀態，所以這種方式行不通

CSS3有縮放的屬性，我們可以利用這個屬性，縮小50%的1px的邊框，來實現這個功能，具體實現代碼如下

<p class="border3">

 <p class="content">偽類設置的邊框</p>

</p>

css:

.border3{

 position: relative; 

 }

 

.border3:before{

 content: '';

 position: absolute;

 width: 200%;

 height: 200%;

 border: 1px solid red;

 -webkit-transform-origin: 0 0;

 -moz-transform-origin: 0 0;

 -ms-transform-origin: 0 0;

 -o-transform-origin: 0 0;

 transform-origin: 0 0;

 -webkit-transform: scale(0.5, 0.5);

 -ms-transform: scale(0.5, 0.5);

 -o-transform: scale(0.5, 0.5);

 transform: scale(0.5, 0.5);

 -webkit-box-sizing: border-box;

 -moz-box-sizing: border-box;

 box-sizing: border-box;

}

實現思路：

1、設定目標元素的參考位置

2、給目標元素添加一個偽元素before或者after，并設置絕對定位

3、給偽元素添加1px的邊框

4、用box-sizing: border-box 屬性把邊框都包進寬和高里面

5、寬和高設置為 200%

6、整個盒子模型縮小為0.5

7、調整盒子模型的位置，以左上角為基準 transform-origin: 0 0;

實現結果在iphone顯示如下：