Use css3 to implement background gradient method

Before I knew 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

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

//从左往右的线性渐变
p{
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 is the starting direction of the gradient, which 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 top to bottom. Left to right;

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

The third parameter is the color at the end of the gradient.

2. Add the linear gradient of 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%, #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 15% on the left, to 50%, and then to 85% , and finally to the right, the order of color gradient is blue to #1a82f7, #2F2727, #1a82f7 and then to red.

3. Radial gradient (from the center of the circle to the outside of the 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 meaning of the above code is: a color from blue to red, spreading from the center of the circle to the periphery radial gradient.

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

4. Background gradient facing the 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 the 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.

The above is the detailed content of Use css3 to implement background gradient method. For more information, please follow other related articles on the PHP Chinese website!