css如何實(shí)現(xiàn)0.5像素的邊框-創(chuàng)新互聯(lián)
這篇文章主要介紹了css如何實(shí)現(xiàn)0.5像素的邊框，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比費(fèi)縣網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式費(fèi)縣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋費(fèi)縣地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。
公司的設(shè)計(jì)師在做設(shè)計(jì)圖的時(shí)候都是以iphone6（寬為750物理像素）為基準(zhǔn)進(jìn)行設(shè)計(jì)的。iphone6的設(shè)備像素比（即css像素與物理像素的比例）是2，所以設(shè)計(jì)師在設(shè)計(jì)圖畫了邊框?yàn)?px的box的時(shí)候，相對(duì)于css代碼來說就是0.5像素。
對(duì)于這個(gè)問題，最直觀的方法就是css直接設(shè)置邊框?yàn)?.5px，經(jīng)過測(cè)試，iPhone可以正常顯示，android下幾乎所有的瀏覽器都會(huì)把0.5識(shí)別為0，即無(wú)邊框狀態(tài)，所以這種方式行不通
CSS3有縮放的屬性，我們可以利用這個(gè)屬性，縮小50%的1px的邊框，來實(shí)現(xiàn)這個(gè)功能，具體實(shí)現(xiàn)代碼如下
偽類設(shè)置的邊框
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;
}實(shí)現(xiàn)思路：
1、設(shè)定目標(biāo)元素的參考位置
2、給目標(biāo)元素添加一個(gè)偽元素before或者after，并設(shè)置絕對(duì)定位
3、給偽元素添加1px的邊框
4、用box-sizing: border-box 屬性把邊框都包進(jìn)寬和高里面
5、寬和高設(shè)置為 200%
6、整個(gè)盒子模型縮小為0.5
7、調(diào)整盒子模型的位置，以左上角為基準(zhǔn) transform-origin: 0 0;
實(shí)現(xiàn)結(jié)果在iphone顯示如下：
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css如何實(shí)現(xiàn)0.5像素的邊框”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
文章標(biāo)題：css如何實(shí)現(xiàn)0.5像素的邊框-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：
http://weahome.cn/article/pedgj.html
重慶分公司
重慶分公司
