Css3 learning + practice (3)

Css3 basic attribute gradient ---- gradient

The kernel of modern browsers. Mainstream content includes Mozilla (familiar with Firefox, flock, and other browsers), WebKit (familiar with browsers such as safari and chrome), and Opera (operabrowser) and Trident (an annoying IE browser ).

The CSS prefix of some private attributes varies with different kernels.

Mozilla kernel CSS prefix-Moz;

WebKit kernel CSS prefix-WebKit;

Opera kernel CSS prefix-O;

Trident kernel CSS prefix-ms;

Css3 gradient is divided into linear-gradient (linear gradient) and radial-gradient (radial gradient ). A gradient is generally used to set the background attribute of the background.

Linear Gradient: it refers to the gradient from left to right, from right to left, or from top to bottom, from bottom to top.

Radial Gradient: A Gradient Based on the specified number of diameters.

Linear-gradient (a, B, c) linear gradient parameter A: angle or left, top, that is, given a gradient angle; left indicates a gradient from left to right; indicates the gradient from top to bottom.

B: gradient color at the start; C: gradient color at the end

Application of Linear Gradient in WebKit:

In Mozilla and opera, you only need to change the prefix.

In Trident, filter is required.

 
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 + */
 

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.

In Mozilla, opera, and WebKit, you can set the gradient from top left to bottom right.

You can also set the Color diversity of the gradient:

And the gradient color width.

Angle:

If no angle is specified, it is automatically defined based on the start position. If you want to control the gradient direction more, you can set the angle.

When specifying an angle, remember that it is an angle generated by the horizontal line and the gradient line,Clockwise. Therefore, a left-to-right horizontal gradient is generated using 0deg, and a vertical gradient from the bottom to the top is created at 90 degrees.

 

Rotate the angle counterclockwise.

Application transparency on gradient-transparency ):