CSS3 gradient background effect for compatibility

First, CSS3 achieve compatibility gradient background effect, compatible with FF, Chrome, IE

Gradient effect, now the main browser ff, Chrome, Opera, ie8+ can be used with the private prefix CSS3 properties to easily drop the gradient effect, IE7 and the following can also be filtered through the filter to achieve the gradient effect (filter to achieve the use of a lot of resources)

? why filter to achieve gradient effect will consume a lot of resources Oh, rookie, what do not understand, will only Baidu. It's laughed at.

The reason is: because the internal IE in the resolution filter , but also through a large number of CPU calculation , so as to achieve the filter effect , and finally render.

Second, how to achieve the gradient effect of the browser

1, CSS3 to achieve the standard wording of the gradient background

Background:linear-gradient ([<angle> | <side-or-corner>,] <color-stop> [, <color-stop>]+);

• []Represents a character class in the regular, and here you can understand it as a small unit.
• |Represents a candidate. That means "or", either in front or on the back.
• ?As a quantifier, the expression of 0 one or 1 the other, the implication is that you can not specify the direction, directly fade away.

Side-or-corner
side-or-cornerChinese means "Edge or corner", the optional values are:

[left | right] | | [Top | bottom]

Color-stop
Gradient key Color node, syntax:

<color> [<percentage> | <length>]

Gecko Kernel Browser:
Background:-moz-linear-gradient (Top, #CCC, #333);
WebKit Kernel Browser:
Background:-webkit-gradient (linear, Top, from (#CCC), to (#333));
IE8 and below are implemented by filters:
Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=1,startcolorstr= ' #CCC ', endcolorstr= ' #333 '); /*ie Filters for Gradients */
Among them, gradienttype=1 represents the horizontal gradient, gradienttype=0 represents the longitudinal transformation. Startcolorstr= "Color" represents the starting color of the gradient gradient, and endcolorstr= "color" represents the color at the end of the gradient.
ie8+:
background: -ms-linear-gradient(0%,100%);

CSS3 gradient background effect for compatibility