What is Linear-gradient useful for?

Color gradient

The simplest example:

.bgc{
    width: 200px;
    height: 45px;
    background: linear-gradient(blue, red)
}
Copy the code

As you can see from this example, the most direct effect of this property is to make the container gradient color. So what arguments does it take? What are the techniques?

Linear-gradient Specifies the received parameter

linear-gradient([<angle> | to <side-or-corner>]? , <color-stop-list>)
Copy the code

In general, you write three arguments. The first parameter is the Angle (which can be deg, or a direction word like top, left top, etc.), which determines the Angle of the gradient. The default is 180DEg. So the initial example is actually background: Linear-gradient (180deg, Blue, Red). 180 degrees means a gradient from bottom to top, 90 degrees from left to right, 0 degrees from top to bottom, and -90 degrees from right to left. See this article for details on how Angle determines color change. It’s a very good article. www.w3cplus.com/css3/do-you…

The second and third parameters are receiver colors, which represent the color of the gradient.

What if the gradient color is too much

In fact, the last parameter can be multiple, that is, multiple colors can be passed. If the above example were rewritten asbackground: linear-gradient(45deg,blue,red,green);the

What if I want to specify the gradient length

In fact, the colors in our example code above are incomplete parameters; in fact, each Color above each other is a Color stops.

Color stops

Each node contains two parameters, the location of the color node. Background: Linear-gradient (90deg, Blue 10px, Red 40px, green 170px);

The location of the color node is the positive color (in the example above, blue 10px means blue begins to fade at the rest of the gradient at 10px). By default, if the location value is not passed, the location is split.

Learning from this, smart light friends will have some ideas of Angle cutting, let’s take a look at how to use Linear-gradient Angle cutting.

Corner cut

The idea of Angle cutting is pretty simple, just make one of the colors transparent and let’s say I want to make a cut in the upper right corner of a rectangle

.bgc{
    width:195px;
    height: 200px;
    background-color: #425df3;
    background: linear-gradient(-135deg, transparent 20px.#425df3 0);
}
Copy the code

The gradient color is transparent and the last color is set to 0.

Add linear gradient(-45deg, transparent 20px, # 425DF30); It is good

But we’ll find out

What happens if we set the position of the two transparents to 100px

Why is that? Since the gradient property has a layer of gradient each time we write it, what we see is actually the result of two gradients added together. So how to deal with it?

Use background-size to keep the length the same and the height half, and set the position of the two gradients respectively.

.bgc{
    width:195px;
    height: 200px;
    background-color: #425df3;
    background: 
    linear-gradient(-135deg, transparent 100px.#425df3 0) top, 
    linear-gradient(-45deg, transparent 100px.#425df3 0) bottom;
    background-size: 100% 50%;
}
Copy the code

Ps: background-size: the corresponding ratio is determined by the position of the Angle you cut, if the two angles are left and right, then usebackground-size: 50% 100%;. And remember in the correspondinglinear-gradientThe location of the following Settings.

But we’ll see

This pattern is similar to the one we have above. It looks like… Appeared twice the same picture, yes! The reason for this is that no background-repeat property was added, so each layer of gradient pattern is tiled twice. So we changed the code to add background-repeat: no-repeat; And change the 100px to the 20px we need

.bgc{
    width:195px;
    height: 200px;
    background-color: #425df3;
    background: 
    linear-gradient(-135deg, transparent 20px.#425df3 0) top, 
    linear-gradient(-45deg, transparent 20px.#425df3 0) bottom;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}
Copy the code

And you’re done!

What about the four angles? Will there be other pits? The good answer is no. Just change the position of the gradient and the scale of size

.bgc{
    width:195px;
    height: 200px;
    background-color: #425df3;
    background: 
    linear-gradient(-135deg, transparent 20px.#425df3 0) top right ,
    linear-gradient(-45deg, transparent 20px.#425df3 0) bottom right,
    linear-gradient(45deg, transparent 20px.#425df3 0) bottom left ,
    linear-gradient(135deg, transparent 20px.#425df3 0) top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
Copy the code

Congratulations on finishing the study of corner cutting!

Reference article:

www.jianshu.com/p/cebec6e92…

www.w3cplus.com/css3/do-you…