前言
實現原理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))
第二個屬性：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
.minpx-top
}
總結
手機端的1px邊框如何實現
1 把邊框設定為absolute,使用after,定義寬度為1px mixin.styl 2 通過 media,判斷不同的dpi,來改變相應的y軸寬度 base.styl 定義公共class border 1px，在用到1px邊框的地方，加上border 1px 又叫物理畫素 是顯示屏能夠控制的最小...
移動端1px邊框實現
一看上篇博文的發布日期，就知道自己好久沒有寫技術文章了。一是可能工作比較忙，二是可能自己也比較懶散啦。今天重新敲起鍵盤。來跟大家分享乙個最近新學到的技術。一是為鞏固自己的掌握程度。也希望能幫到有需要的同學。大神看到的話可以提點意見。幫助小弟更快的成長。好了正文從這開始 如何實現在移動裝置下1畫素的邊...
實現移動端1px邊框
最近學了一下vue的實戰課程，學習到了其中的乙個頁面設計技巧，覺得深有感觸，於是便寫個部落格記錄下來，以便下次查閱 專案中是通過vue stylus來實現的，那麼首先需要說一下實現原理，因為在移動端中物理畫素是裝置畫素的兩倍，那麼以平時在pc端中設計的1px 在移動端裝置中就是2px了，那麼，我們要...