CSS3 background gradient gradient_html/css_WEB-ITnose

CSS3 Gradient is divided into linear-gradient (linear gradient) and radial-gradient (radial gradient). Remember that gradient is not a property of CSS3, but the value of an attribute. Although it is not specifically stated in CSS3 that gradient is for background, what I know so far is that only background will apply the gradient attribute (background-image Also possible).

Let’s first directly illustrate the basic usage of these two gradients through two examples: Share a best-used UI front-end framework!

Linear gradient linear-gradient:

. Code

1. background:- moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
2. background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace), to(#f96));/*Old gradient for webkit*/
3. background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
4. background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/

The -webkit-gradient in the second line is the way of writing the old version of the webkit kernel browser.

The effect is as follows:

Radial gradient radial-gradient: Share a most useful UI front-end framework!

.code

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

Effect:

IE browser’s support for gradient is quite different from other modern browsers. We will discuss it in < > and <> are explained in two articles respectively.