最近和一個朋友聊天，朋友吐露了工作上的一些不開心，說自己總是喜歡跟別人比較，活得比較累，這種感覺大部分人經歷過，往往覺得是自己心態不好，其實不然，這是人性，此時應該快速擺脫這種狀態，想到DOTA大9神的筆錄，游戲也是人生，懂得思考的人生才會不斷促使自己進步，詳細我不清楚了，大概意思是這樣：人這一輩子就一次，快樂很重要，人如何感受到快樂，說起來真的不難，有兩個點，一點是“你能夠讓別人喜歡你”；另外一點是“跟好朋友一起時你能夠卸下面具”，是怎么樣的就怎么樣。希望能給不開心的同學尋找一絲幫助~
回到今天的主題.5px(0.5px簡寫為.5px)，可能大家聽過.9，它是android平台應用軟件開發里的一種特殊圖片形式，本文的.5指如何使用css實現.5px的線條~
目錄
你可能不知道的.5px
移動web設計中，在retina顯示屏下網頁會由1px會被渲染為2px，那么視覺稿中1px的線條還原成網頁需要css定義為.5px。文章開頭的漫畫中，細心的設計師發現粗線條並吐槽，前端哥的理由是因為css的border-width不支持.5px，所以用了1px來替代，最終渲染為2px的粗線條，這個問題往往會被忽視，從而導致移動網頁中普遍存在2px的粗線條。
retina下的網頁1px被渲染為2px(甚至是3px，例如iPhone 6 Plus)，可參考的文章《高清顯示屏原理及設計方案》
錯誤案例示范：微信-AA收款-詳情頁按鈕，視覺稿給過來的按鈕邊框是1px，重構上線后按鈕邊框是2px。
此問題已優化，如何實現請往下看。
border值不支持.5px嗎
有部分同學使用boder-width:.5px后，在PC或者頁面頁面看不到.5px的邊框(ios 8系統已完美支持border-width值0.5px線條)，會認為border-width不支持.5px，是不是這樣，我們先做個試驗。
首先打開鏈接或者掃描二維碼，體驗demo
http://peunzhang.github.io/demo/d5px/border.html
可以看出.5px的border在chrome瀏覽器上不顯示線條，如下圖：
調大chrome分辨率后，.5px的border在PC瀏覽器上顯示出線條，如下圖：
.5px的border在iPhone 6 plus下顯示出線條，如下圖：
.5px的border在三星galaxy s4 android 5.0.1下不顯示線條，如下圖：
其它設備就不一一截圖，有興趣的請測試，有驚喜，簡單整理如下表格：
試驗結果參考
- css的border-width值支持.5px，顯示狀態受屏幕分辨率的影響
- ios 8和winphone 8的設備對高清屏做了特殊處理，支持顯示border-width:.5px
- android 幾乎所有的機型不支持顯示.5px的邊框
另外，本文也對height值做了試驗，結果跟border-width是一樣的，我們還可以試驗font-size、box-shadow等屬性。
http://peunzhang.github.io/demo/d5px/height.html
實現.5px的線條
網絡上有很多方法，如設置viewport，box-shawdow，border-image，background-image，transform:scale等，這里不做介紹(百度或者谷歌“retina 1px 邊框”有答案)，本文只介紹一種覺得比較好用的方法，一來兼容性好，二來不依賴圖片。
transform:scale(x,y)
通過css支持定義border或者height為.5px大的線條，在android設備中的無法顯示出來，這里有個小技巧，果設置線條為1px，然后通過transform:scale(x,y)來縮放線條為原來的一半，可顯示0.5px的線條。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>點5測試 - scale</title> <style type="text/css"> .line { height: 50px; line-height: 50px; background-color: #CCC; border-bottom:1px solid red } .scale { position: relative; height: 50px; line-height: 50px; background-color: #CCC } .scale:after { position: absolute; content: ''; width: 100%; left: 0; bottom: 0; height: 1px; background-color: red; -webkit-transform: scale(1,.5); transform: scale(1,.5); -webkit-transform-origin: center bottom; transform-origin: center bottom } </style> </head> <body> <div class="line">1px</div> <br/><br/> <div class="scale">0.5px</div> </body> </html>
http://peunzhang.github.io/demo/d5px/height-scale.html
實現.5px的圓角邊框
.5px的邊框，看起來看神奇，這里感謝藍叔提供的方法。
原理：先定義1px的圓角邊框，然后拉伸內容的寬度和高度為父級的2倍(邊框厚度不變)，然后再使用transform:scale(0.5)縮放為原來的0.5倍
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>點5測試 - border-radius</title> <style type="text/css"> body{padding: 50px;-webkit-touch-callout:none;} [class*="btn"]{margin: 0 auto;} .btn-1 { width: 200px; height: 42px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; line-height: 42px; background-color: #EDEDED; border: 1px solid red; } .btn { position: relative; width: 200px; height: 42px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; line-height: 42px; background-color: #EDEDED; } .btn:before { content: ''; position: absolute; top: -50%; bottom: -50%; left: -50%; right: -50%; -webkit-transform: scale(0.5); transform: scale(0.5); border-style: solid; border-width: 1px; border-color: red; -webkit-border-radius: 10px; border-radius: 10px; } </style> </script> </head> <body> <div class="btn-1">1px border</div> <br/><br/> <div class="btn">.5px border</div> </body> </html>
http://1.peunzhang.sinaapp.com/demo/d5px/border-radius.html
如果你在chrome打開，會發現縮放線條會導致邊框顏色變淺，但大家可以放心使用，因為在大部分移動設備(相對高端)的顏色還是正常的。
趕在七夕前的一篇文章，願天下有情人終成眷屬 ❀