CSS3 Study Notes: linear-gradient

 

{

    -webkit-border-radius:10px;

    -moz-border-radius:10px;

    -o-border-radius:10px;

    border-radius:10px;

}

Today we will introduce the gradient of CSS3: linear-gradient

Gradient is a common effect on Web pages. However, before the emergence of CSS3, the gradient effect must be achieved using images. This will cause problems, just like the rounded corner and shadow mentioned earlier. Because images are used, it is certain that the performance of the webpage is affected to a certain extent, at the same time, there are also difficulties in website maintenance and modification. The gradient of CSS3 has been born for a long time. So far, as long as it is a browser that supports this attribute, except for their private prefix, other methods are the same.

At the beginning, webkit used:

-Webkit-gradient (<type>, <point> [, <radius>]?, <Point> [, <radius>]? [, <Stop>] *) // old syntax writing rules

Currently, webkit uses:

-Webkit-linear-gradient ([<point >||< angle>,]? <Stop>, <stop> [, <stop>] *) // The latest writing syntax.

Now, the new syntax is consistent with that of other browsers, including firefox and opera (now opera uses the webkit kernel );

In fact, gradient is divided into two types: linear gradient (linear-gradient) and radial gradient (radial-gradient ). We can add linear-gradient and radial-gradient to any attributes that can accept images, such as backgorund-images and list-style-image. Today, I want to introduce the linear-gradient on the title.

In my opinion, gradient parameters are changeable and complex.

The simplest linear-gradient Syntax:

Linear-gradient (starting point, starting color, ending color );

The starting point indicates the starting position of the gradient. The color ranges from the starting color to the ending color.

There are many ways to write a gradient starting point:

1. Use one of top, right, bottom, and left to specify the starting point of the gradient.

.test{

    background:-webkit-linear-gradient(top,#fff,#000);

    background:-moz-linear-gradient(top,#fff,#000);

    background:-o-linear-gradient(top,#fff,#000);

    background:linear-gradient(top,#fff,#000);

}

 
2. A little more complicated. You can use the combination of top and left or right, or use bottom and left or
Right combination to change the gradient start point. But remember: top cannot be combined with bottom, and left cannot be combined with right.
.test{
    background:-webkit-linear-gradient(top right,#fff,#000);
    background:-moz-linear-gradient(top right,#fff,#000);
    background:-o-linear-gradient(top right,#fff,#000);
    background:linear-gradient(top right,#fff,#000);
}
.test{
    background:-webkit-linear-gradient(bottom left,#fff,#000);
    background:-moz-linear-gradient(bottom left,#fff,#000);
    background:-o-linear-gradient(bottom left,#fff,#000);
    background:linear-gradient(bottom left,#fff,#000);
}
3. The above two statements can only draw a limited number of gradient. We can use the angle to set the starting point of the gradient.
The following code is used as a template to change "0deg" to the desired angle.
.deg0{
    background:-webkit-linear-gradient(0deg,#fff,#000);
    background:-moz-linear-gradient(0deg,#fff,#000);
    background:-o-linear-gradient(0deg,#fff,#000);
    background:linear-gradient(0deg,#fff,#000);
}
I added 12 divs with a difference of 30deg.
Based on the results, I drew this picture again.
It can be seen that when the angle is used to set the gradient start point, 0deg corresponds to botton, 90deg corresponds to left, 180deg corresponds to top, 360deg corresponds to right. The entire process starts from bottom and rotates counter-clockwise.
I have only learned so much about the starting point. If the draft is modified later, it will be updated immediately after I understand it.
Gradient color settings can also be varied:
There are more than two gradient colors. You can add more colors between the start color and the end color.
.test{
    background:-webkit-linear-gradient(top,#fff,red,#000,red);
    background:-moz-linear-gradient(top,#fff,red,#000,red);
    background:-o-linear-gradient(top,#fff,red,#000,red);
    background:linear-gradient(top,#fff,red,#000,red);
}
Or:
.test{
    background:-webkit-linear-gradient(top,red,yellow,blue,green,purple,orange);
    background:-moz-linear-gradient(top,red,yellow,blue,green,purple,orange);
    background:-o-linear-gradient(top,red,yellow,blue,green,purple,orange);
    background:linear-gradient(top,red,yellow,blue,green,purple,orange);
}
In the above example, the color gradient is uniform, and we can also give each color the position of the gradient, so that the gradient is not just a uniform change, this is also very simple, you only need to add a gradient civilian after the color you want to modify. In order to be simple and intuitive, I only use three colors.
Uniform Variation
.test{
    background:-webkit-linear-gradient(red ,green,blue);
    background:-moz-linear-gradient(red ,green,blue);
    background:-o-linear-gradient(red ,green,blue);
    background:linear-gradient(red ,green,blue);
}
After a location is added
.test{
    background:-webkit-linear-gradient(red 50% ,green,blue);
    background:-moz-linear-gradient(red 50% ,green,blue);
    background:-o-linear-gradient(red 50% ,green,blue);
    background:linear-gradient(red 50% ,green,blue);
}
 
Of course, if the color format uses the rgba format in CSS3, the gradient will be transparent.
 
The introduction of linear gradient (linear-gradient) has ended. If you have any errors, please leave a message.
 
When I study the radial gradient (radial-gradient ),