移动端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