[轉]retina屏下支持0.5px邊框的狀況

2014-12-31更新：
截至到IOS8.1，safari仍不支持@supports
待safari支持@supports, 就能夠利用0.5px了！

---

2014-7-25更新：
1. 修正dpr = 1.5 機器下四角邊框的縮放比例；
2. 修正右邊框（rBor）的transform-origin爲100%, 100%;
3. 添加對 dpr = 3 機器的支持； 經過如下機器驗證：小米1（dpr = 1.5）、SAMSUNG S3（dpr = 2）、NEXUS 5（dpr =3） 測試地址：

---

移動web開發，總避免不了1設備像素邊框的問題。本文參考了half-point css border in ios 一文。

理想的

div{
   border:1px solid black;
}

@media (-webkit-min-device-pixel-ratio: 2){
 div{
    border-width:0.5px;
 }
}

僅有 Firefox和Safari 8 (introduced in OS X Yosemite)支持。twitter有位哥們聽到這個消息時，已經不知所云。

現實的

原理簡單介紹：content屬性與:before 及:after 僞元素配合使用，來插入生成內容，即所需邊框。使用transform scale方法將生成內容的邊框（或高度或寬度），縮小至合適大小（如0.5倍）。另外，處理好transform-origin值相當重要，下圖能夠幫助你更好地理解origin值。查看代碼或查看此gist，並奉上demo： 繼續閱讀 →