css3 background gradient_html/css_WEB-ITnose

Before I didn’t understand that CSS could also be used to make background gradients, I always used PS to apply background gradient pictures to the web pages I made. However, not long ago, I learned that CSS3 can also do background gradients, and it has become much easier to create background gradient effects. Here are some methods of doing background gradients in CSS3.

1. Linear gradient

//自上而下的线性渐变div{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*/}

//从左往右的线性渐变div{width:400px;height:100px;padding:5px;border:1px solid #ccc;background:-webkit-linear-gradient(left, 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 It is the starting direction of the gradient, and does not need to be followed by the ending direction 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 where the gradient starts;

The third parameter is the color of the gradient end.

2. Add the linear gradient of the stop() function

div{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%, #2F2727 50%,#1a82f7 85%, red);/* Firefox*/background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,#1a82f7 85%, red);/* Opera, Opera mobile*/}

The meaning of the above code is: from From 15% on the left, to 50%, to 85%, and finally to the right, the color gradient sequence is blue to #1a82f7, #2F2727, #1a82f7 and then red.

3. Radial gradient (from the center of the circle to the outside of the circle)

div{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 meaning of the above code is : A radial gradient with color from blue to red, spreading from the center of the circle to the periphery.

If the parameter circle is changed to ellipse, it will be an elliptical radial gradient.

4. Background gradient facing IE browser

IE browser can only use IE's own filter to achieve gradient.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

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

The second parameter: the color of the ending position of the gradient;

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

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

Although the background gradient function of CSS3 is powerful, there are also browser compatibility issues. The current specific support for the css3 background gradient attribute is: IE10, FireFox3.6, Safari4.0, Chrome, Opera11.1 (radial gradient is not supported yet), IOS 3.2, Opera Mobile11.1, Android. Therefore, we need to pay attention to browser compatibility when using CSS3 to make background gradients.