Using CSS3 to implement a background gradient method

Before I could do a background gradient without knowing CSS, I applied it to my own web page with a picture of a background gradient in Photoshop. However, not long ago I learned that CSS3 can also do background gradient, want to do the background gradient effect is very easy to many, the following is some CSS3 do background gradient method.

I. Linear gradient

Top-down linear gradient p{width:400px;height:100px;padding:5px;border:1px solid #ccc; Background:-webkit-linear-gradient (Top, blue, red);/* Safari, Chrome*/background:-moz-linear-gradient (top, blue, red);/* firefox*/background:-o- Linear-gradient (top, blue, red);/* opera, Opera mobile*/}

Linear gradient from left to right p{width:400px;height:100px;padding:5px;border:1px solid #ccc; background:-webkit-linear-gradient blue, red);/* Safari, Chrome*/background:-moz-linear-gradient (left, blue, red);/* firefox*/background:-o- Linear-gradient (left, blue, red);/* opera, Opera mobile*/}

The first parameter is the direction of the beginning of the gradient, which is not followed by the end of the gradient, the direction of the gradient can be from top to bottom, or from left to right;

The second parameter is the color at which the gradient begins;

The third parameter is the color at which the gradient ends.

Two. Adding a linear gradient to the stop () function

p{width:400px;height:100px;padding:5px;border:1px solid #ccc; Background:-webkit-linear-gradient (left, Blue, # 1a82f7 15%, #2F2727 50%, #1a82f7 85%, red);/* Safari, Chrome*/background:-moz-linear-gradient (left, blue, #1a82f7 15%, #2F 2727 50%, #1a82f7 85%, red);/* Firefox*/background:-o-linear-gradient (left, blue, #1a82f7 15%, #2F2727 50%, #1a82f7 85%, re d);/* opera, Opera mobile*/}

The above code means: from the left 15%, to 50%, then to 85%, and finally to the right, the order of color gradient is blue to #1a82f7, #2F2727, #1a82f7再到red.

Three. Radial gradient (from center to circle)

p{width:200px;height:200px;padding:5px;border:1px solid #ccc; Background:-webkit-radial-gradient (circle, Blue, red) ;/* Safari, chrome*/background:-moz-radial-gradient (Circle, Blue, red);/* firefox*/}

The above code means a radial gradient that spreads from the center to the periphery of a color from blue to red.

If the parameter circle is swapped for Ellipse, it is the radial gradient of the ellipse.

Four. Changing the background of IE browser

ie the gradient can only be implemented using IE's own filters.

Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr=#00ffff,endcolorstr=#9fffff,grandienttype=1);

First parameter: The color of the starting position of the gradient;

Second parameter: The color of the gradient end position;

The third parameter: the type of the gradient, 0 for the vertical gradient, and 1 for the horizontal gradient.

Note: The background gradient setting for IE browser does not need to be set for background, just use filter directly.

Although the background gradient of CSS3 is powerful, there are browser compatibility issues. Currently, the specific support for CSS3 background gradient properties is: ie10,firefox3.6+,safari4.0+,chrome,opera11.1 (radial gradient not supported) +,ios 3.2+,opera mobile11.1,android. So we need to be aware of browser compatibility when using CSS3 for background gradients.