Css3 gradient, css3gradient

Css3 gradient, css3gradient

Linear-gradient (linear gradient) and radial-gradient (radial gradient ).
1. Linear Gradient applied in Mozilla
Syntax:-moz-linear-gradient ([<point >|| <angle>,]? <Stop>, <stop> [, <stop>] *)
Parameters. The first parameter indicates the direction of the linear gradient. top is from top to bottom, left is from left to right. If it is defined as left top,
That is, from the upper left corner to the lower right corner. The second and third parameters are the start color and end color 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>] *)
// The latest release of the writing syntax
-Webkit-gradient (<type>, <point> [, <radius>]?, <Point> [, <radius>]? [, <Stop>] *)
// Old syntax writing rules
Parameter:-webkit-gradient is the implementation parameter of the webkit engine for gradient. There are five parameters in total. The first parameter indicates the gradient type (type ),
It can be linear (linear gradient) or radial (radial gradient ). The second and third parameters are both a pair of values.
Indicates the gradient start point and end point. This pair of values can be expressed in coordinates or key values, such as left top (upper left corner)
And left bottom (lower left ). The fourth and fifth parameters are two color-stop functions. Color-stop function accepted
The first parameter indicates the gradient position. 0 indicates the starting point, 0.5 indicates the midpoint, and 1 indicates the ending point. The second parameter indicates the color of the gradient.
Old-fashioned writing methods: background:-webkit-gradient (linear, center top, center bottom, from (# ccc), to (#000 ));
New Writing Method:-webkit-linear-gradient (top, # ccc, #000 );

3. Application of Linear Gradient in linear gradient:
Syntax:-o-linear-gradient ([<point >||< angle>,]? <Stop>, <stop> [, <stop>]);
Instance: background:-o-linear-gradient (top, # ccc, #000 );

4. 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 uses a filter to implement gradient. StartColorstr indicates the starting point color, and endColorstr indicates the ending point color.
GradientType indicates the gradient type. 0 is the default value, indicating the vertical gradient. 1 indicates the horizontal gradient.

1. Starting from 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 10 + */
Background:-webkit-linear-gradient (top, # ace, # f96 );
/* Operators' 11.10 + */
Background:-o-linear-gradient (top, # ace, # f96 );

2. Start with left (horizontal direction) and center (vertical direction). Left → Right:
/* Firefox 3.6 + */
Background:-moz-linear-gradient (left, # ace, # f96 );
/* Safari 5.1 +, Chrome 10 + */
Background:-webkit-linear-gradient (left, # ace, # f96 );
/* Operators' 11.10 + */
Background:-o-linear-gradient (left, # ace, # f96 );

3. Start with left (horizontal direction) and top (vertical direction ):
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 ):
Sample 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 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 );