前言

我們使用手機App的WebView和瀏覽器檢視網頁時，經常能看見那細如髮絲的“0.5px”的邊框、線條，讓整個頁面效果看起來更加細緻。這裡所謂的“0.5px”是如何實現的呢，web頁面中最小的單位是1px,“0.5px”已經脫離了web定義的單位標準，如果直接使用“0.5px”那麼它其實是以1px畫素呈現。我在這裡說下所謂的移動端“0.5px”畫素實現方法，如果小弟理解的有什麼錯誤，歡迎各位大神指點！！！

實現原理

1px畫素如果只顯示一半，那是否就是所謂的“0.5px”畫素？問題的答案很相近，現在就來揭祕它的實現原理，CSS3提供了一個強大的屬性，Gradients漸變，這個屬性讓前端擁有像設計師一樣的能力，不需要PS就能繪製一幅五彩冰紛的彩色圖。
CSS3 定義了兩種型別的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
我們這裡需要用到的是線性漸變（Linear Gradients），如果讓一天1px的線條實現上到下兩種顏色的漸變，那麼這條1px畫素細線是否就擁有了2中顏色，如果有一種顏色為透明，那麼是不是意味著它實現了所謂的“0.5px”.

devicePixelRatio（密度比）

解釋完“0.5px”實現原理，這邊需要再次提及devicePixelRatio這個屬性，根據移動端螢幕解析度的不同，每個終端機的螢幕密度比也不一樣，“0.5px”需要適配不同密度比的裝置它也需要設定不同的適配樣式，前幾年大部分的安卓機的devicePixelRatio值是2，這幾年很多手機越來越注重使用者的體驗，所以密度比相對有所提高，一部分的安卓機devicePixelRatio值為3，當然蘋果手機很早就實現了devicePixelRatio=3。如何獲取裝置的devicePixelRatio值，大家可以參考我上篇部落格檢測手機型別、密度比和物理寬高

實現1px邊框的漸變

這邊先用一行漸變的程式碼來解釋下漸變的原理

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, red))

• 1

第一個屬性：linear 定義漸變的型別 線性漸變
第二個屬性：left bottom 定義漸變開始的起始點 左下角向上漸變
第三個屬性：left top 定義漸變結束點 左上角像下漸變
第四個屬性：color-stop(0.5, transparent) color-stop方法建立色標點。含有兩個引數，第一個引數表示漸變點的在整個漸變範圍內的位置，以小數表示；第二個引數為顏色，可以使用RGBA的形式表示，這樣可以指定顏色的透明度。

上面程式碼如果使用在1px邊框中，那麼這1px有一半顏色為透明，一半顏色為紅色,這樣就構建一條頭髮絲細的“0.5px”線條。當然上面的程式碼不足以構建能夠使用的“0.5px”畫素邊框，下面附上一個能夠使用的“0.5px”畫素的樣式。

@media screen and (-webkit-device-pixel-ratio: 2){
            .minPx-top{border:0;}
            .minPx-top {
                background-position: left top;
                background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, red), color-stop(0.5, red));
            }
            .minPx-top{
                background-repeat: repeat-x;
                -webkit-background-size: 100% 1px;
            }
        }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

上面程式碼大家可以用一個div標籤加上minPx-top樣式嘗試下，在手機端-webkit-device-pixel-ratio: 2和PC端對比一下，看下線條之間的區別。

總結

頭髮絲邊框已經成為移動端線條的趨勢，很多網站為了加強使用者體驗都使用“0.5px”畫素。這次只講解在密度比為2的手機端實現“0.5px”細如髮絲邊框的方法，當然大家可以嘗試下如何在-webkit-device-pixel-ratio: 3的情況下實現“0.5px”邊框。除此之外，可以嘗試實現 div上下左右 邊框使用組合，“0.5px”圓角邊框。