CSS3 Gradient Gradient

Divided into linear-gradient (linear gradient) and radial-gradient (radial gradient).
1. Linear gradient application in Mozilla
Syntax:-moz-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]*)
Parameters, total three parameters, the first parameter is the direction of the linear gradient, top is from top to bottom, left is right-down,
That's from the upper-left corner to the lower-right corner. The second and third parameters are the start and end colors, respectively.

For example:
Background:-moz-linear-gradient (top, #ccc, #000);

2. Application of linear gradient in WebKit

Syntax:-webkit-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]*)
Latest published writing Grammar
-webkit-gradient (<TYPE>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
Rules for writing old grammar
Parameters:-webkit-gradient is the implementation parameter of the WebKit engine for the gradient, a total of five. The first parameter represents a gradient type
It can be linear (linear gradient) or radial (radial gradient). The second and third arguments are a pair of values, respectively
Represents the start and end of a gradient. This pair of values can be expressed in the form of a coordinate or a key value, such as left top (upper right corner)
And the left bottom (lower right corner). The fourth and fifth parameters, respectively, are two color-stop functions. Color-stop function Accept
Two parameters, the first represents the position of the gradient, 0 is the starting point, 0.5 is the midpoint, 1 is the end point, and the second represents the color of the point.
Old writing methods: Background:-webkit-gradient (linear,center top,center bottom,from (#ccc), to (#000));
New Writing methods:-webkit-linear-gradient (Top, #ccc, #000);

3. Application of linear gradient under Oper:
Syntax:-o-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]);
Example: Background:-o-linear-gradient (top, #ccc, #000);

4. The application of linear gradient in Trident (IE)
Syntax: Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= #1471da, endcolorstr= #1C85FB) ;/*ie<9>*/
-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= #1471da, endcolorstr=# 1C85FB) ";/*ie8+*/
IE relies on filters for gradients. STARTCOLORSTR represents the color of the starting point, and endcolorstr represents the end color.
GradientType represents a gradient type, 0 is the default value, represents a vertical gradient, and 1 represents a horizontal gradient.

1, starting at center (horizontal direction) and top (vertical direction) that is Top→bottom:
/* Firefox 3.6+ */
Background:-moz-linear-gradient (top, #ace, #f96);
/* Safari 4-5, Chrome 1-9 */
/*-webkit-gradient (, [,]?, [,]? [, ]*) */
Background:-webkit-gradient (Linear,top,from (#ace), to (#f96));
/* Safari 5.1+, Chrome + * *
Background:-webkit-linear-gradient (top, #ace, #f96);
/* Opera 11.10+ */
Background:-o-linear-gradient (top, #ace, #f96);

2, starting from left (horizontal direction) and center (vertical direction) is also left→right:
/* Firefox 3.6+ */
Background:-moz-linear-gradient (left, #ace, #f96);
/* Safari 5.1+, Chrome + * *
Background:-webkit-linear-gradient (left, #ace, #f96);
/* Opera 11.10+ */
Background:-o-linear-gradient (left, #ace, #f96);

3. Starting at left (horizontal direction) and top (vertical):
Background:-moz-linear-gradient (left Top, #ace, #f96);
Background:-webkit-linear-gradient (left Top, #ace, #f96);
Background:-o-linear-gradient (left Top, #ace, #f96);

4. Angle (Angle):
Example code with no angle:
Background:-moz-linear-gradient (left, #ace, #f96);
Background:-webkit-linear-gradient (left, #ace, #f96);
Background:-o-linear-gradient (left, #ace, #f96);
Add a 30-degree angle code:
Background:-moz-linear-gradient (left 30deg, #ace, #f96);
Background:-webkit-gradient (linear, 0 0, 100% 100%, from (#ace), to (#f96));
Background:-o-linear-gradient (30deg, #ace, #f96);

CSS3 Gradient Gradient