CSS3 study notes linear-gradient_html/css_WEB-ITnose

I think CSS3 is very good. I have read it a little bit and tried some attributes. For myself, I don’t have the courage to say that I have learned CSS3. I feel that any matter that seems small to me can only be judged from my own perspective. Even "simple" HTML is worth studying in my opinion. Only by maintaining a humble attitude at all times can we see further and move more steadily.

I would like to thank the website here:

w3cplus, W3School, W3C and other online tutorials, blogs, etc. (there are many more so I won’t list them one by one). I started from these I started to come into contact with the legendary CSS3 and HTML5, and my own study notes will naturally learn from them.

Suggestion: Most CSS3 properties are still in draft, it is best to add the private prefix of each browser when using them

eg:

{

    -webkit-border-radius:10px;

    -moz-border-radius:10px;

    -o-border-radius:10px;

    border-radius:10px;

}

Today we introduce the gradient of CSS3: linear-gradient

Gradient should be considered a very common effect on web pages. But before the advent of CSS3, gradient effects had to be achieved using images. This will cause problems, just like the rounded corners and shadows mentioned before, because the use of images will definitely affect the performance of the web page to a certain extent, and there will also be problems with later maintenance and modification of the website. CSS3 gradients have been around for a long time. So far, as long as browsers support this attribute, except for their private prefixes, other writing methods are the same.

At the beginning, under webkit, I used:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

而到现在，在webkit下使用的是：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新书写语法 

现在，新式语法与其他浏览器，包括firefox，opera的语法书写统一（现在的opera已经使用了webkit内核）；

其实gradient，分成两种一种是线性渐变（linear-gradient），另一种是径向渐变（radial-gradient）。我们可以将linear-gradient和radial-gradient添加到任何可以接受图片的属性，比如：backgorund-images，list-style-image等等。今天我要介绍的就是标题上的linear-gradient。

Linear gradient

In my opinion, the parameters of gradients vary and are a bit complicated, so let’s start with the simple ones

The simplest syntax of linear-gradient:

linear-gradient (starting point, starting color , end color);

The starting point indicates the position where the gradient starts, and the color is the gradient from the start color to the end color.

There are many ways to write the starting point of the gradient:

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 top combined with left or right, or you can use Combine bottom with left or

right to change the starting point of the gradient. But remember: top cannot be combined with bottom, 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 writing methods can only draw a limited number of gradients. We can use the angle to set the starting point of the gradient.

Use the following code as a template and change "0deg" to the angle you want

.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 30deg as the difference.

Based on the results, I drew this picture again

It can be seen that when using angle to set the starting point of the gradient, 0deg Corresponds to bottom, 90deg corresponds to left, 180deg corresponds to top, and 360deg corresponds to right. The whole process is to rotate counterclockwise starting from the bottom.

I only know so much about the starting point for the time being. If the draft is revised in the future, I will update it immediately after I understand it.

Gradient color settings can also be varied:

The gradient can have more than two colors, and more colors can be added between the starting 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 gradients are uniform. We can also point the gradient position for each color, so that the gradient is not a simple uniform change. This is also very convenient. It's simple, just add the gradient text after the color you want to modify. To keep it simple and intuitive, I only used three colors.

Uniform change

.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 adding position

.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.

That’s it for the introduction of linear-gradient. If there are any errors, please leave a message.

When I study radial-gradient, I can’t take notes on radial gradient