CSS3 Radial Gradient

/* Radial Gradient */
div.radial {
width:600px;
height:400px;
margin:30px Auto;
border:1px #f00 Solid;
Background-image:-webkit-gradient (radial,50% 50%,0, 50% 50%,100,from (green), to (purple), Color-stop (50%,red), Color-stop (80%,yellow));
}

<!--radial Gradient--
<div class= "Radial" >

</div>

****

Radial gradient (Radial gradients)

The syntax for a radial gradient is very similar to a linear gradient.

-moz-radial-gradient ([<bg-position> | | <angle>,]? [<shape> | | <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

In addition to the starting position, direction, and color that you have seen in the linear gradient, the radial gradient allows you to specify the shape of the gradient (round or oval) and size (nearest, nearest, farthest, most far corner, contained or overwritten (Closest-side, Closest-corner, Farthest-side, Farthest-corner, contain or cover).

Color stops: just like with a linear gradient, you should define the starting and ending colors of the gradient along the gradient line. The following circles have the same starting and ending colors, but on the left are uniform gradients for the default color interval, and each color on the right has a specific position.

The start and end color is along the gradient line and will have a specified color point at the specified position (in percent or length). The number of ends of the color is infinite. If you use a percentage position, 0% represents the start point and 100% is the end point, but values outside the region can be used to achieve the desired effect.

Background:-moz-radial-gradient (red, yellow, #1E90FF); Background:-moz-radial-gradient (red 5, Yellow 25%, #1E90FF 50%);

shape: Here you can see the difference between the two possible shapes, a circle (left side) and an ellipse (right), both starting with the bottom:

. radial_gradient_circle {    background:-moz-radial-gradient (bottom left, circle, red, yellow, #1E90FF);} Radial_ gradient_ellipse {    background:-moz-radial-gradient (bottom left, ellipse, red, yellow, #1E90FF);}

sizes:different options for size (Closest-side, Closest-corner, Farthest-side, Farthest-corner, contain or cover) Points to a point that is used to define the size of a circle or ellipse.

Example: Ellipse's near edge vs far corner
The following two ellipses have different sizes. The left one is set from the distance from the starting point (center) to the near edge, and the right one is determined by the distance from the starting point to the far corner.

  Background:-moz-radial-gradient (Ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);  Background:-moz-radial-gradient (Ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, White);

Example: Round near edge vs far Side
The gradient size of the circle on the left is determined by the distance from the start Point (center) to the near edge, while the circle on the right is determined by the distance from the starting point to the far edge.

Background:-moz-radial-gradient (Circle Closest-side, red, yellow 10%, #1E90FF 50%, White); Background:-moz-radial-gradient (Circle Farthest-side, red, yellow 10%, #1E90FF 50%, White);

Example: Include a circle
Here you can see the default circle on the left, the same gradient version, but the circle that is included on the right side.

Background:-moz-radial-gradient (red, yellow, #1E90FF); Background:-moz-radial-gradient (contain, red, yellow, #1E90FF);

V. Repeating gradients (repeating gradients)

If you want to repeat a gradient, you can use-moz-repeating-linear-gradient and-moz-repeating-radial-gradient.

In the following example, each instance specifies four starting and ending colors, and infinitely duplicates.

. repeating_radial_gradient_example {    background:-moz-repeating-radial-gradient (black, black 5px, white 5px, White 10px);} . repeating_linear_gradient_example {     background:-moz-repeating-linear-gradient (top left-45deg, red, red 5px, White 5px, white 10px);}

***

Gradient Position Understanding Code

<style>
div {
Width:100px;Height:100px;Border-radius:50px;
Background:radial-gradient( at35px35px,#FFF,#CCC,#FFF);
Background:-webkit-radial-gradient(35px35px,#FFF,#CCC,#FFF);
}
</style>
<div></div>
The color above the circle is adjusted with a radial gradient. The first line style is to set the width of the container and set the fillet to half the width (as a radius) so that a circle can be obtained. The next two lines of style are to color this circle,! Firefox and Opera do not need prefixes to use radial-gradient directly (they once also need a prefix and do not need it now). Chrome needs a-webkit-prefix to be used. And there is a difference between a radial gradient with a prefix and a radial gradient syntax without a prefix.
First, the radial gradient with no prefix. It uses the "at Syntax"radial-gradient(
  [
    [渐变大小]?
    [ at 渐变圆心坐标]?
  ,]?
  颜色[ 开始位置]
  [,颜色[ 开始位置]]+
);In fact, the real grammar is much more complicated than this, which is simplified according to my own understanding. The first argument is to specify a position and size, followed by a list of colors. The format of the first parameter is "gradient size at gradient center coordinates". The gradient size if there is only one value, then it means that the gradient is a positive circle, and the value is its radius. If it is two values, turn the gradient into an oval, and the gradient center coordinates are calculated from the origin of the container.
These parameters can be used without specifying the default values. The default value of the center coordinate is the hub of the container, which is relatively simple.the default value for the gradient size is more complex. If the container is square, the default value for the gradient size is a positive circle. The radius of the circle is the far corner distance from the center to the container.

<style>
div {width:100px;Height:100px;margin:10px;float: Left;}
#a {background:radial-gradient(Red,Green);}
#b {background:radial-gradient( at 35px35px,Red,Green);}
#c {background:radial-gradient( at0px0px,Red,Green);}
</style>
<divID="a"></div>
<divID="b"></div>
<divID="C"></div>
If the container is not a square, the gradient size becomes an ellipse. The two radii of this ellipse are the width and height of the rectangle formed by the center of the gradient to the farthest corner of the container, multiplied by sqrt (2), which can be deduced from the equation of the ellipse (which is actually the bounding ellipse radius of the rectangle). However, such calculations are generally not required.
Figuring out the first parameter is followed by a list of colors. Each parameter can be accompanied by a starting position in addition to the color value.<style>
div {width:100px;Height:100px;margin:10px;float: Left;}
#a {background:radial-gradient(Red100%,Green);}
#b {background:radial-gradient(Red,Green0%);}
</style>
<divID="a"></div>
<divID="b"></div>
The distribution of the color is from the position of the 0% (center of the gradient) to the position of 100% (the 100% position is the radius of the gradient). Or, by default, the position of the first color is 0%, and the last color is 100%. This range is more than the nearest color to fill. For example, the first example above, red itself is in the position of 0%, but it is set to 100% of the position. So red starts to extend from 100%, then the position of 0% to 100% is not set, and it is automatically populated with the nearest color, which is red. The second example is the same, because the green is set to 0% of the position, then the red range is 0% to 0%, so it is not visible. Green's starting position is set to 0% and then to 0% to 100%, so the second example from 0% to 100% is greenish. By default, multiple colors are set and they divide the 100% area to a gradient. Of course, in addition to the percentages, we can also use specific pixels to set this size. The size of the pixel setting refers to the distance extending outward from the center of the gradient.<style>
div {
Width:100px;Height:100px;margin:10px;float: Left;
Background:radial-gradient( at0px0px,Red,Green80%,Blue);
}
</style>
<div></div>
With so much to learn, it's no problem to use the mirrored gradient. The rest is the browser problem, we said before the whole heap is not prefixed with the CSS, and WebKit is currently not compatible with a radial gradient without a prefix, so we need to write a separate style for it. But the calculation method and this is the same, there is no need to repeat the said. It's just a little different in wording. A style with a prefix cannot use the "gradient size at gradient center coordinates" notation. It divides this thing into two parameters. The first parameter represents the gradient center coordinate, and the second parameter represents the gradient size. As with the above, these two parameters can also be omitted. The default is the same as the calculation, only the format is different, so I will not repeat what I said. The other thing to mention is that Firefox supports both prefix writing and non-suffix notation, while opera does not support prefixes. IE starting from 10 compatible with the radial gradient, with the-ms-prefix, specifically because of my lazy Ann IE10 did not study. But the calculation method is the same as above, I really want to try to install a IE10 = =.

CSS3 Radial Gradient