這篇文章主要介紹了Web前端繪製0.5像素的幾種方法,透過採用meta viewport、border-image、background-image和transform: scale()的方式實現,,需要的朋友可以參考下
最近完成了公司安排的行動web觸控螢幕開發，期間涉及在行動裝置上顯示線條，最開始採用PC常用的css board屬性來顯示1個像素的線條，但是發現在行動裝置上並不美觀，參考淘寶、京東的觸控螢幕發現它們都是採用淺細的線條來顯示在行動裝置上。
以下紀錄了比較方便的4種繪製0.5像素線條方式
一、採用meta viewport的方式，這個也是淘寶觸控螢幕採用的方式
常用的移動html viewport的設定如下
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" / >
具體意思就不多提，它就是讓頁面的高寬度即為裝置的高寬像素，而為了方便繪製0.5像素的viewport的設定如下
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />
#這樣html的寬高就是裝置的2倍，此時依然使用css board為1像素的話，肉眼看到頁面線條就相當於transform:scale(0.5)的效果，即為0.5像素
但是這種方式涉及到頁面整體佈局規劃以及圖片大小的製作，所以若採用這個方式還是事先確定為好
二、採用border-image的方式
##這個其實就比較簡單了，直接製作一個0.5像素的線條和其搭配使用的背景色的圖片即可
#
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
border-width: 0 0 1px 0; border-image: url("img/line_h.gif") 2 0 round;
}
</style>
<body>
<p>
<p>点击1</p>
<p>点击2</p>
</p>
</html>三、採用background-image的方式
我這裡採用的是漸變色linear-gradient的方式，程式碼如下
#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%);
background-image: linear-gradient(bottom,red 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom right;
</style>
</head>
<body>
<p>
<p>点击1</p>
<p>点击2</p>
</p>
</body>
</html>linear-gradient(bottom,red 50%, transparent 50%);的意思是從底部繪製一個漸變色，顏色為紅色，佔比為50%，而總寬度已經設定為100%而總高度為一個像素background-size: 100% 1px；
四、採用transform: scale()的方式##就是將繪製出來的線條的高度進行半倍的縮放，程式碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
position: relative;
}
p:last-child:after {
position: absolute;
content: '';
width: 100%;
left: 0;
bottom: 0;
height: 1px;
background-color: red;
-webkit-transform: scale(1,0.5);
transform: scale(1,0.5);
-webkit-transform-origin: center bottom;
transform-origin: center bottom
}
</style>
</head>
<body>
<p>
<p>点击1</p>
<p>点击2</p>
</p>
</body>
</html>以上是前端頁面繪製0.5像素方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
