Background in HTML5+CSS3:-moz-linear-gradient usage

In CSS background:-moz-linear-gradient let the site background gradient properties, currently Firefox 3.6 or more versions and Google browser support this property.

Background:-moz-linear-gradient (top, #bccfe3 0, #d2dded 100%); Suitable for ff3.6+

Background:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, #bccfe3), Color-stop (100%, #d2dded)); Suitable for chrome,safari4+

Background:-webkit-linear-gradient (top, #bccfe3 0, #d2dded 100%); Suitable for chrome10+,safari5.1+

Background:-o-linear-gradient (top, #bccfe3 0, #d2dded 100%); Suitable for opera 11.10+

Background:-ms-linear-gradient (top, #bccfe3 0, #d2dded 100%); suitable for ie10+

Background:linear-gradient (Top, #bccfe3 0, #d2dded 100%); Suitable for the

The background uses a CSS gradient display to achieve a smooth transition of two or more specified colors without using an image. This, in turn, reduces the use of download time and bandwidth, and looks better when zoomed in, allowing you to create a more flexible layout.

Firefox supports two types of CSS gradients: linear (-moz-linear-gradient) and radial (-moz-radial-gradient).

Three, linear gradient (Linear gradients)

To create a linear gradient, you need to set a start point and a direction (or angle) of the gradient, and define the starting and ending colors.

-moz-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]*)

starting point: The start point works like the background position. You can set the horizontal and vertical positions as percentages, or in pixels, or you can use left/center/right in the horizontal direction, and you can use top/center/bottom vertically. The position starts at the upper-left corner. If you don't specify a horizontal or vertical position, it defaults to center.

For example, here is a linear gradient, starting at center (horizontal discovery) and top (vertical discovery), and from blue to white.

The code is as follows:

. linear_gradient_square {width:100px; height:100px; border:1px solid #333; background:-moz-linear-gradient (top, Blue, white);}

Or start at left (horizontal) and center (vertical)

The main part of the code is as follows:

Background:-moz-linear-gradient (left, blue, white);

or starting at left (horizontal) and top (vertical direction)

The main part of the code is as follows:

Background:-moz-linear-gradient (left Top, blue, white);

Angle (Angle): as you can see above, if you do not specify an angle, it is automatically defined according to the starting position. If you want more control over the direction of the gradient, you might as well set the angle to try.

For example, the following two gradients have the same starting point left center, but the right hand side has a 20 degree angle.

The following gradient core code with an angle is as follows:

Background:-moz-linear-gradient (left 20deg, black, white);

When you specify the angle, remember that it is an angle that is produced by the horizontal line and the gradient lines, counterclockwise direction. Therefore, using 0deg will result in a left-to-right transverse gradient, while 90 degrees will create a vertical gradient from the bottom to the top.

The core code is as follows:

Background:-moz-linear-gradient (<angle>, red, white);

Start and end color (color Stops): In addition to the starting position and angle, you should specify the beginning and ending colors. 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.

Here is a simple example of three starting and ending colors. Because the first and last colors do not specify a color point, they are displayed as the default of 0% and 100%.

Background:-moz-linear-gradient (top, blue, white 80%, orange);

If no position is specified, the color is evenly distributed.

The core code is as follows:

Background:-moz-linear-gradient (left, red, orange, yellow, green, blue);

Transparency (Transparency): also supports transparent gradients. This is quite useful, for example, when stacking multiple backgrounds. Here is a combination of two backgrounds: a picture, a white to transparent linear gradient.

The core code is as follows:

. multibackground_transparent {background:-moz-linear-gradient (right, Rgba (255,255,255,0), Rgba (255,255,255,1)), URL (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);} Iv. 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&gt, <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.

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);}