Pure CSS Radial gradient (css3--gradient)

Gradient

First, the radial gradient of CSS3

Website: http://www.spritecow.com Image Mosaic Technology

CSS3 gradient are divided into linear-gradient (linear gradient) and radial-gradient (radial gradient).

HTML code:

1 <H1>Hold the front page</H1>2 <P>Now, get the nitty-gritty of the story.</P>3 <P>The most important information is delivered first.</P>4 <H1>extra! extra!</H1>5 <P>Further developments is unfolding.</P>6 <P>You can read the all on it here.</P>

CSS code:

1 *{margin:0;padding:0;}2 HTML{Height:100%;3 background:-webkit-radial-gradient (center center,circle cover, #0091d5 0, #0091d5 15%, #004a86 100%);4 background:-moz-radial-gradient (center center,circle cover, #0091d5 0, #0091d5 15%, #004a86 100%);5 background:-ms-radial-gradient (center center,circle cover, #0091d5 0, #0091d5 15%, #004a86 100%)6 Background:-o-radial-gradient (center center,circle cover, #0091d5 0, #0091d5 15%, #004a86 100%)}7 Body{background:URL (index.png);Height:100%;Color:#3CC;}

Note: radial:[? re?di?l] Radial. Gradient:[? gre?di?nt] tilt, gradient, steepness. Circle:[' s?:kl] circle

The application of linear gradient in Mozilla

Grammar:

1 -moz-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]*)

parameters: There are three parameters, the first parameter represents the direction of the linear gradient, top is from top to bottom, left is from the right, and if it is defined as a left top, it is from the upper-right corner to the lower-bottom corner. The second and third parameters are the start and end colors, respectively. You can also insert more parameters between them, representing a gradient of multiple colors. ：

Based on the above introduction, let's look at a simple example:

Html:

1 <  class= "Example example1"></div>

Css:

1{ width: 150px;   Height: 80px; }

Now let's apply a simple gradient style to this div:

1{2   background: -moz-linear-gradient (Top, #ccc, #000);  3 }

The effect is as follows:

Note: This effect is temporarily displayed only under the Mozilla kernel browser.