Using linear to make complex border effect analysis in CSS

This article mainly introduces the use of CSS linear to make complex border effect analysis of the relevant data, the use of linear-gradient properties to create a beautiful border effect

A way to create a gorgeous border effect using linear-gradient attributes is seen online. 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 p, a colored p that defines a large circle of white squares. Two overlap, and let the white p cover the color p, 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 p 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.