css如何實現(xiàn)0.5像素的邊框
這篇文章主要介紹了css如何實現(xiàn)0.5像素的邊框，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)于2013年開始，先為鄖西等服務建站，鄖西等地企業(yè)，進行企業(yè)商務咨詢服務。為鄖西企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
公司的設計師在做設計圖的時候都是以iphone6（寬為750物理像素）為基準進行設計的。iphone6的設備像素比（即css像素與物理像素的比例）是2，所以設計師在設計圖畫了邊框為1px的box的時候，相對于css代碼來說就是0.5像素。
對于這個問題，最直觀的方法就是css直接設置邊框為0.5px，經(jīng)過測試，iPhone可以正常顯示，android下幾乎所有的瀏覽器都會把0.5識別為0，即無邊框狀態(tài)，所以這種方式行不通
CSS3有縮放的屬性，我們可以利用這個屬性，縮小50%的1px的邊框，來實現(xiàn)這個功能，具體實現(xiàn)代碼如下
<div class="border3"> <div class="content">偽類設置的邊框</div> </div>
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;
}實現(xiàn)思路：
1、設定目標元素的參考位置
2、給目標元素添加一個偽元素before或者after，并設置絕對定位
3、給偽元素添加1px的邊框
4、用box-sizing: border-box 屬性把邊框都包進寬和高里面
5、寬和高設置為 200%
6、整個盒子模型縮小為0.5
7、調(diào)整盒子模型的位置，以左上角為基準 transform-origin: 0 0;
實現(xiàn)結(jié)果在iphone顯示如下：
感謝你能夠認真閱讀完這篇文章，希望小編分享的“css如何實現(xiàn)0.5像素的邊框”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!
網(wǎng)頁名稱：css如何實現(xiàn)0.5像素的邊框
瀏覽路徑：http://chinadenli.net/article36/jijepg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、建站公司、企業(yè)網(wǎng)站制作、微信小程序、小程序開發(fā)、軟件開發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
