Color values in CSS3 Rgba and the specific details of the gradient

CSS3 before gradient picture can only use background picture
CSS3 gradient syntax allows us to save the overhead of downloading pictures
and has a better effect when changing the browser resolution

Color value Rgba

We are familiar with the RGB color standard, is the R (Red), g (green), B (blue) Three color overlay changes to form a variety of colors
Value 0~255, or 0~100%
RGBA is the addition of alpha opacity parameters on an RGB basis

. demo {    width:100px;    height:100px;    Background-color:rgb (255, 0, 0);}

. demo {    width:100px;    height:100px;    Background-color:rgba (255, 0, 0, 0.5);}

Alpha value 0~1, the smaller the value the more transparent

Linear gradient Linear-gradient

Gradient is the meaning of "inclination", linear is "linear".
Gradual discoloration is a smooth transition between multiple colors, creating a brilliant color
The linear gradient linear-gradient parameter has a gradient direction (optional) and any gradient color

. demo {    width:100px;    height:100px;    Background:linear-gradient (Red,lime,blue);}

Notice what I'm writing here is background not background-color.
(In fact, the gradient is a function of background-image)

Do not fill in the gradient direction by default is from top to bottom
The gradient direction has the following property values
To top, to bottom (default), to-left, to-right
To top left, to top right, to bottom left, to bottom right
or fill in the angle xxxdeg
For example, to the top left is the direction toward the

. demo {    width:100px;    height:100px;    Background:linear-gradient (to top left,red,lime,blue);}

Angle 0deg equals to top, increasing angle, equivalent to clockwise rotation

. demo {    width:100px;    height:100px;    Background:linear-gradient (20deg,red,lime,blue);}

The position of each color gradient can be added after each color

. demo {    width:100px;    height:100px;    Background:linear-gradient (Red 30%,lime 50%,blue 70%);}

If you do not fill in, the browser is divided by default, such as three color value by default is 0%,50%,100%

There is also an uncommon function repeating-linear-gradient that allows us to repeat the linear gradient

. demo {    width:100px;    height:100px;    Background:repeating-linear-gradient (Red, Rgba (100,100,100,0.5), Blue 50%);}

And the result is an incredibly ugly gradient.

Radial Gradient Radial-gradient

Radial means "radial, radiant."
is a gradient center outward gradient

. demo {    width:200px;    height:100px;    Background:radial-gradient (Red,lime,blue);}

Similar to the linear gradient
But the first parameter (optional) is the gradient shape of the radial gradient, the position
You can use Circle Circle, oval ellipse (default)

. demo {    width:200px;    height:100px;    Background:radial-gradient (Circle,red,lime,blue);}

You can use the format of the shape at postion to define the position of the gradient center

. demo {    width:200px;    height:100px;    Background:radial-gradient (circle at 30% 30%,red,lime,blue);}

The gradient position can be in percent form or in pixel form
If you write only one value, the other value defaults to the middle position 50%

. demo {    width:200px;    height:100px;    Background:radial-gradient (circle at 30%,red,lime,blue);}

Gradient size If you don't want to use keywords, you can also use a digital form

. demo {    width:200px;    height:100px;    Background:radial-gradient (100px 100px at 50px 50px,red,lime,blue);}

Represents the gradient size 100px*100px, gradient position 50px*50px

Radial gradients also have a function of repeating gradients
The usage is similar to the linear gradient, and here's a little more explanation.

. demo {    width:200px;    height:100px;    Background:repeating-radial-gradient (Red 10%,lime 20%,blue 30%);}