Some explanations on the techniques of linear-gradient and the rendering mechanism of CSS gradient

Gradients are not used much, but when used well, always bring a refreshing effect, take such an example (figure below),

First notice that the personal introduction of this piece is in two different background color between the area (blue Line separates the upper and lower parts), and then is a personal introduction wrapped a disconnected border, headache helpless, why is disconnected, then my border should how to use it, since border invalid, So what can achieve this effect, I consider the use of SVG, with path to draw this path, but considering the radian processing, oneself is a big head, obviously SVG is not suitable, then, what method can achieve this effect, considering the two gaps are diagonal, I think of the CSS properties, transform skew, then I can let this element inclined to cover, then reached a notch effect, but the gap has, the gap and the "personal introduction" of the blue background between the color is not correct, so, CSS linear gradient is ready, As long as the control of the two colors and the upper and lower background of the same, and let them each half, the problem is solved

Background:linear-gradient (to top, #d2effb 50%, #e3f6fd 50%);

Here I set 50% for two colors, meaning that each color accounted for half, then why this effect, which is related to the linear gradient of multiple color nodes, here to place a rookie tutorial example, the next

From the style can be seen is three different colors, and set a different percentage, the result we can see is only the middle part is the color gradient transition, then the percentage of the rendering mechanism is, because the linear gradient is the default vertical downward, we can boldly specify the percentage and the starting render position about, A passage from the MDN can also be seen to be right, under

Of course, 0% and 100% can also not write, because they are the default refers to the starting color and the end color, then it is much simpler to understand, "red green Blue", the first color is red, the last color is blue, so the starting and ending colors are red and blue, respectively, But it has specified a corresponding percentage, from the rendering from 0% to know, from 0% to 10% of the length of the paragraph, all are red, so there is no gradient feeling, the same as the blue part of the same can be understood, from 90% to 100% of the part of the color is all blue, In the middle of the gradient area is divided into two parts, one is 10% to 85%, one is 85% to 90%, but because the diagram is not clear, so back to the example diagram (slightly modified, only two colors), as follows:

The code is as follows:

{            width: 300px;             height: 100px;             background: linear-gradient (Red 20%,blue 80%);                

You can see that the whole red and blue parts are the same height, the middle (between 20% and 80%) is the transition color, in order to more concise explanation of the transition color is between 20% to 80%, and then the previous example is as follows:

At first glance, how they are identical, in fact the code has been rescue, as follows:

{            width: 300px;             height: 100px;             background: linear-gradient (red 0%,red 20%,red 20%,blue 80%,blue 80%,blue 100%);        }

In this block of code, we have two two color nodes, red 0%~red 20%, red 20%~blue 80%, Blue 80%~blue 100%, so it's easier to see the difference between the starting and ending colors of 0%~20%, So the rendering is all red, 80%~100% between the starting and ending colors are blue, so the rendering is all blue, and 20%~80% between the starting and ending colors are red and blue, so render the transition between the two colors, So there is not a little bit simpler but easy to understand the wording, the answer is, as follows:

{            width: 300px;             height: 100px;             background: linear-gradient (red 0%,red 20%,blue 80%,blue 100%);        }

From the code can see the repetition of the color to remove it, then it is not difficult to exit the simpler wording, because 0% and 100% is the default point to start color and end color, so the final code is as follows:

{            width: 300px;             height: 100px;             background: linear-gradient (Red 20%,blue 80%);        

But their renderings are the same, under:

So when we get here, it's not hard to infer why I wrote a pair of 50% at the beginning of the article, and here's a small example:

The code is as follows:

{            width: 300px;             height: 100px;             background: linear-gradient (to Top,black 20%, #e3f6fd 20%, #e3f6fd 40%,red 40%,red 60%,blue 60%,blue 80 %,green 80%);        }

I believe we are not difficult to understand.

Reprint also please indicate the source! Http://www.cnblogs.com/zxn-9588/p/8674296.html

Some explanations on the techniques of linear-gradient and the rendering mechanism of CSS gradient