在移動端開發過程中，我們經常會遇到 1px 的邊框或者線條無法有效顯示的問題。這是因為手機屏幕像素密度高（Retina屏），1個 CSS像素點 要對應2個或3個設備物理像素點，導致 1px 的線條在屏幕上變得非常細，從而導致視覺效果上的變形甚至消失。

但是，我們可以使用CSS技巧解決這個問題。以下是幾種常見的解決方案：

/* 讓本身就是1px的邊框在Retina屏幕顯示正確 */
border-style: solid;
border-width: 0 0 1px;
transform: scaleY(0.5);

我們可以在 border-width 中設置底部邊框的寬度為 1px，然后使用 transform: scaleY(0.5) 進行縮放，將底部邊框高度變為 0.5px，從而讓1px的邊框在Retina屏幕上顯示最真實的像素。如果想要顯示其他的邊框，只需要修改 border-width 即可。

/* 使用viewport單位 */
.border {
border: 1px solid #000;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 0;
border-right-width: 0;
height: 1rem; /* 高度為1個根字號大小 */
}

使用 viewport 單位，可以解決邊框的問題。例如上面的代碼中，我們設置 .border 的高度為 1rem，這樣無論設備分辨率多少，都會保持邊框的寬度為 1px。同時，需要注意設置 border-top-width 和 border-bottom-width 為 1px，而忽略左右兩個方向上的邊框。

/* 使用box-shadow設置非零邊框效果 */
.box {
box-shadow: 0 0 0 1px #000 inset;
height: 1rem; /* 高度為1個根字號大小 */
}

我們還可以使用 box-shadow 屬性來實現非零邊框的效果。例如上面的代碼中，我們對 .box 添加了一組 box-shadow 屬性，實現了一個 1px 的內邊框效果。

總之，CSS技巧可以有效解決Retina屏幕下 1px邊框 顯示問題，讓我們可以輕松實現想要的效果。