web前端繪制0.5像素的幾種方法_html/css_WEB-ITnose

　　以下紀錄了比較方便的4種繪制0.5像素線條方式

一、采用meta viewport的方式，這個也是淘寶觸屏采用的方式

常用的移動html viewport的設置如下

具體意思就不多提，它就是讓頁面的高寬度即為設備的高寬像素，而為了方便繪制0.5像素的viewport的設置如下

這樣html的寬高就是設備的2倍，此時依然使用css board為1像素的話，肉眼看到頁面線條就相當于transform:scale(0.5)的效果，即為0.5像素

但是這種方式涉及到頁面整體布局規劃以及圖片大小的制作，所以若采用這個方式還是事先確定為好

二、采用 border-image的方式

這個其實就比較簡單了，直接制作一個0.5像素的線條和其搭配使用的背景色的圖片即可

     
點擊1
 
點擊2
 

三、采用background-image的方式

我這里采用的是漸變色linear-gradient的方式，代碼如下

     
點擊1
 
點擊2
 

linear-gradient(bottom,red 50%,transparent 50%);的意思是從底部繪制一個漸變色，顏色為紅色，占比為50%，而總寬度已經設置為100%而總高度為一個像素background-size: 100% 1px；

這樣顯示出來就是0.5像素的線條

四、采用transform: scale()的方式

就是將繪制出來的線條的高度進行半倍的縮放，代碼如下

     
點擊1
 
點擊2
 

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com