CSS3 Background Gradient Gradient

CSS3 Gradient is divided intolinear-gradient (linear gradient)And Radial-gradient (radial gradient). Remember that the gradient is not a property of CSS3, but a value of an attribute, although in CSS3 it is not specifically stated that the gradient is for background, but for the moment I have learned that only background will apply the gradient property (background-image can also）。

We first direct two examples to illustrate the basic usage of these two gradients: share one of the best UI front-end frames!

Linear gradient Linear-gradient:

. Code

2. Background:-moz-linear-gradient (left, #ace, #f96);/*mozilla*/
4. background:-webkit-gradient (Linear,0  50 %,100 % 50 %,from (# ACE), to (#f96));/*old gradient for webkit*/  
6. Background:-webkit-linear-gradient (left, #ace, #f96):/*new gradient for webkit*/
8. Background:-o-linear-gradient (left, #ace, #f96); /*opera11*/

 

Where the second row of-webkit-gradient是webkit内核浏览器老版本的写法。

The effect is as follows:

Radial gradient radial-gradient: share one of the best UI front-end frames!

. Code

2. Background:-moz-radial-gradient (#ace, #f96, #1E90FF);
4. Background:-webkit-radial-gradient (#ace, #f96, #1E90FF);

Effect:

IE browser support for gradient is significantly different from other modern browsers, we will <<CSS3 radial gradient (radial-gradient) >> and <<CSS3 Linear gradient (linear-gradient) >> Two articles are described separately.

CSS3 Background Gradient Gradient