The 1px border will now be thicker in HD

why

For the 750 design, the screen width is 375 relative to the iphone6, which is 2 times DPR. When border: 1px solid # CCC is written in the style, the rendered border is equivalent to 1*2px, so it looks thicker than the design.

The solution

postcss-write-svg

border-bottom: 1px solid;
border-image: svg(square param(--color #eee)) 1 stretch;
Copy the code

Note: When using the postCSS-px-to-viewPort plug-in for VW adaptation, always place the PostCSs-write-SVG plug-in first. In Safari and earlier versions of Android, border: 1px solid transparent; Property will not see lines, transparent needs to be removed.

box-shadow

box-shadow: 0  -1px 1px -1px #e5e5e5, // top line
            1px  0  1px -1px #e5e5e5, // right side line
            0  1px  1px -1px #e5e5e5, // lower sideline
            -1px 0  1px -1px #e5e5e5; / / the left line
Copy the code

Pseudo element + transform

Implement four edges

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

unilateral

&::after {
            content: ' ';
            z-index: 999;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #e5e5e5;display: block; width: 100%; height: 1px; // horizontal transform: scale(1, 0.5); }Copy the code

For vertical lines, set width to 1px, height: 100%

Use border images

border: 1px solid transparent;
border-image: url('./image/boeder.jpg') 2 repeat;
Copy the code

flexible

If flexible is used to implement mobile adaptation, you can directly set the border to 1px