Front-end footage parsing-create complex border effects with linear

See a way to create a gorgeous border effect using the Linear-gradient attribute on the web. First give the code, you can see the effect on your own computer:

<! DOCTYPE html> There is code to see, in fact, we do not use border, then the border effect is how to achieve it?
The general idea is that we first define a white div, a colored div that defines a large circle of white squares. Two overlap, and let the white div cover the color Div, the effect of the border is achieved.
There is a lot of CSS knowledge in this area.
1,: Before Pseudo-class
From the above code we can see that in fact, we define a white div in the definition of a: before Pseudo-class, the color square all the styles are placed here. This is because using the: before definition makes positioning easier, as long as the top and left border widths are adjusted. Both of them become a whole.
2, Linear-gradient
This CSS method is now supported by many browsers. The method has the following three modes of usage:
①background:linear-gradient (Top, #fff, #000)
This code means that the upper part is white, and the bottom portion is too black.
②background:linear-gradient (Top,right, #fff, #000)
This code is about position passing two parameters, top and right, which means to start from top to bottom and change to the bottom left, the other reason is the same as the first one.
③background:linear-gradient (30deg, #fff, #000)
The first parameter of this code is to pass the angle, in fact the truth and position are the same, but not from the standard position began to change. So what is the correspondence between angle and position? According to the experiment, 0 degree corresponds to bottom,90 degree corresponding to left,180 degree corresponds to top,360 degree corresponding to right.
The above is the use of the linear method to achieve the beautiful border code and interpretation, we can be implemented locally, so as to discover more novel combinations of implementation methods.

Front-end footage parsing-create complex border effects with linear