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：?繼續閱讀?→

轉載于:https://www.cnblogs.com/sugar-tomato/p/5192279.html

總結

以上是生活随笔為你收集整理的[转]retina屏下支持0.5px边框的情况的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。