前端頁面繪製0.5像素方法介紹-css教學-PHP中文網

前端頁面繪製0.5像素方法介紹

巴扎黑

發布： 2017-08-12 15:04:58

原創

1816 人瀏覽過

這篇文章主要介紹了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；

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

四、採用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: &#39;&#39;;
                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中文網其他相關文章！