1. Implementation method

This article uses the CSS3 attribute postCSS-write-SVG and border-image to draw 1px thin lines (only suitable for straight lines, it is recommended to use transform in pseudo-class to achieve rounded corners). Other implementations such as border-shadow, transform and pseudo-class are not mentioned here, but can also be found online.

The code is in webpack-esnext-cli, SRC /pages/test for all examples of drawing 1px lines using SVG.

Second, the border – image

A brief description of the border-image split:

border-image-source:url('bg.jpg'); Border-image-slice: 1; border-image-slice: 1; Border-image-repeat: stretch; border-image-repeat: stretch; border-image-repeat: stretch; Border-image-width: 1; border-width: 1; If the width of the image is greater than the specified width, it will be extended to the internal (padding/content). // Define the size of the border image beyond the border boxCopy the code

Principle can see CSS3 border-image detail explanation, explain very clear.

Use postCSs-write-SVG

First we configure postCSS-write-SVG. Here we choose to generate base64 encoded images

require("postcss-write-svg")({
  utf8: false
})
Copy the code

Write an SVG generating function in CSS

// In assets/ SCSS /svg. SCSS, you can add the SVG function to assets/ SCSS/svG. SCSS by using the webpack plugin sas-resources-loader. @svg 1px-border {width: 4px; height: 4px; @rect { fill: transparent; // Content is transparent width: 100%; // Width = 4px * 100%; // 4px * 100% stroke-width: 25%; Var (--color, black); // color}}Copy the code

The above function allows us to generate a rectangle with 1px borders and 4px width and height. Here is the 1px line I generated using this SVG function:

As you can see on the way, we use the normal border: 1px solid red; The generated 1px line is a bit thicker due to the Retine screen. Here’s how this function works:

#real-1px {
  margin: 10px;
  height: 20px;
}

#real-1px {
  border: 1px solid;
  border-image: svg(1px-border param(--color red)) 1 stretch;
}
Copy the code

Here we use 25% cropping (i.e. 1px on top, right, bottom and left to set the background for our border). Here we crop an image with 1px red border and 1px transparent inner border, as shown below

Here you can see that there is an incorrect top border display on the lower versions of Android and iPhone. The three 1px borders are thick and the single top border is thin.

Here’s the solution

// The repository code writes mixins to do this compatibility, such as setting the top border, @includesetSvgSingleBorder(top);
#real-top-1px {. border: 0; // Set the width of the remaining three times to 0 border-top: 1px solid; Border-image: SVG (1px-border param(--color red)) 1 stretch; }Copy the code

Above, we need to set the remaining three sides of the border that do not need to display the red line to 0, otherwise there will be compatibility problems, iPhone and some low-end Android can not display normally. This way we can happily use SVG to draw the 1px thin lines we want during development.

Finally, thanks for so many articles online, thanks to the company UI little sister’s piercing eyes.