CSS中1px分割線處理

 

1. 1px 邊框變粗問題

截圖以下（iPhone 6截圖）：

若是咱們把上圖與咱們手機系統上的 1px 邊框進行對比，以下圖：

咱們會發現，上面兩個上下線條，下線條的粗細纔是正確的，上線條就顯得有點粗了。可是上線條咱們是用純正的 1px border生成的，而下線條咱們實際是採用transform壓縮了1px高度的一半模擬實現的，也就至關於 0.5px 的高度了。爲何會這樣呢？

這是由於在2倍屏時1 CSS 像素實際對應2個物理像素, 因此爲了實現真正的 1px 粗細，咱們得使用 0.5px 來模擬。目前除 ios8+ 能夠直接使用 0.5px 單位外，其他皆得經過模擬的辦法搞定

2.解決方案（經常使用）

.article{
height: 1px;
background: #dbdbdb;
transform:scaleY(0.5);
}

更多1px解決方案參考7種方法解決移動端Retina屏幕1px邊框問題

 

參考文章：retina 顯示屏