CSS3 Gradient Gradient

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.