Radial Gradient 4
CSS3 radial gradient is circular or elliptical gradient. The color does not change along a linear axis, but a mixture of a starting point from all directions. But relatively more complex linear gradient than the radial gradient.
Radial gradient has the following format:
radial-gradient ([<starting>]? [<Shape> || <size>]? <Point> <Point> ...)
Radial gradient parameters described in Table 1:
Table 1 CSS3 radial gradient Parameter Description
Examples radial gradient 5
Although the radial gradient is more complex than the linear gradient, as long as the understanding of the role of its basic syntax and associated attribute parameters do not need to spend too much time to adapt. Next, we have to strengthen the use of a radial gradient by combat. All the examples in this section we have a width of 400 pixels, height 300 pixels container implemented.
A, gradient radially outwardly from the interior of the container
A first look simple radial gradient, the center is the middle of the container, from the "# ffc107" radial gradient to achieve color "pink" color, CSS code is as follows:
Viewing the results in the browser shown in Figure 1:
FIG simple radial gradient 1
If you want to make a circular gradient, rather than an oval gradient, just add a keyword "circle", we add a keyword "circle" on the basis of the embodiment, the code is as follows:
At this time, the gradation becomes a circle, viewed in a browser results shown in Figure 2:
FIG 2 circular gradation
As you can see, the graded circular elliptical gradient is a special, horizontal radius and vertical radius having the same length value. Since the gradient circle is a special case of elliptical gradient, the gradient if we main radius (horizontal radius) and a minor radius (the vertical radius) is not the same as an elliptical gradient. As said above, when the major and minor radii are not equal radius, making elliptical radial gradation gradient, the gradient in the production of an oval, may be used keyword "ellipse".
Second, the radial gradient of a predetermined radius
In addition to using different keywords making radial gradient, but also can produce effects of different radial gradient of the gradient parameter to determine the shape of a concentric circle by making a radial gradient, the radius of the major and minor radii. It is defined as the radius of the radial gradient "200px, 100px". Horizontal radius 200px, vertical radius 100px, radial gradient from "# ffc107" the color "pink" Color:
At this time, the gradation level becomes radius 200px, 100px vertical radius of the ellipse in the browser to view the results shown in Figure 3:
FIG 3 define the radius of the radial gradient from
Third, the radial gradient of a predetermined radius and center position
In addition to the above-described method enables simple radial gradient effect, you can also use a gradient form-fitting center location. The main use of "at" with the keyword to define the position of the center of the radial gradient. Radial gradation center position similar to the background-position attribute. For example, the center position "100px, 150px", the horizontal radius of 200px, 100px radius of the vertical, radial gradient from "# ffc107" the color "pink" Color:
At this time, the gradation level becomes radius 200px, 100px vertical radius of the ellipse and the center position "100px 200px" at, in the browser to view the effect shown in Figure 4:
4 and FIG custom radial location of the center of the radial gradient
In addition to setting the center position of the specific values, the percentages and may be used to define a number of keywords, such as "center", "top", "right", "bottom", "left" and combinations of these keywords, such as "top left "," right bottom "and the like, the position of the keyword sequential combination may be reversed.
Four, radial gradient repeated
Like linear gradient, we can also set to repeat radial gradient. In the same manner, you can create duplicate using radial gradient related properties. And linear-gradient syntax is similar, but with a radial gradient gradient repeated basis, the following example, we make a radial gradient repeated three colors:
See browser, gradient 5:
FIG 5 is repeated three-color radial gradient
After a couple of examples of the above understanding, the reader can DIY your own gradient effects.