移動端1px邊框解決方案

高清屏中1px邊框會變粗

緣由

對於750設計稿，相對於iphone6的屏幕寬度是375，即2倍的dpr，當在樣式中寫入border: 1px solid #ccc時，渲染出來的至關於1*2px的邊框，因此看起來就是比設計圖粗了。

解決辦法

postcss-write-svg

border-bottom: 1px solid;
border-image: svg(square param(--color #eee)) 1 stretch;
複製代碼

注意: 當同時使用postcss-px-to-viewport插件進行vw方案適配時，必定要將postcss-write-svg插件放置在前面。在safari瀏覽器和低版本andriod中，border: 1px solid transparent; 屬性會看不見線條，須要將transparent去掉。

box-shadow

box-shadow: 0  -1px 1px -1px #e5e5e5, // 上邊線
            1px  0  1px -1px #e5e5e5, // 右邊線
            0  1px  1px -1px #e5e5e5, // 下邊線
            -1px 0  1px -1px #e5e5e5; // 左邊線
複製代碼

僞類

實現四邊

div:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            transform-origin: left top;
            box-sizing: border-box;
            z-index: 990;
            border: 1px solid #e5e5e5;
        }
複製代碼

單邊

&::after {
            content: '';
            z-index: 999;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #e5e5e5;
            display: block;
            width: 100%; 
            height: 1px; // 橫線 
            transform: scale(1, 0.5);
        }
複製代碼

若是是豎線, 設置width爲1px, height: 100%

使用邊框圖片

border: 1px solid transparent;
border-image: url('./image/boeder.jpg') 2 repeat;
複製代碼

flexible

當經過flexible實現移動端適配時,可直接設置border爲1px