CSS3 gradient (gradients)-Radial gradient

CSS3 Radial Gradient-radial-gradient ()/repeating-radial-gradient ()

A radial gradient is defined by its center.

Create a radial gradient that defines at least two color nodes to render a smooth, excessive color. You can also specify the center of the gradient, the shape (round or oval), and the size.

By default, the centre of the gradient is center (represented in the center), the shape of the gradient is ellipse (representing the ellipse), and the size of the change is Farthest-corner (indicated to the farthest corner)

Grammar:

Background:radial-gradient (center, shape size, Start-color, ..., last-color);

1. Radial gradient-By default, the color nodes are evenly distributed

    . Divone{        background:radial-gradient (Red,green,blue);    }     . divtwo{        background:radial-gradient (Red,blue);         Width:100px;    }

2. Radial gradient-Specify shape

    . Divone{        background:radial-gradient (Circle,red,blue);    }     . divtwo{        background:radial-gradient (Ellipse,red,blue);    }

3. Radial gradient-Specify position

. Divone {    /* low version of Google, also does not support the specified central location */    background:radial-gradient (Red, Green,blue);     background:-webkit-radial-gradient (Bottom,red,green,blue);} . Divtwo {    background:radial-gradient (red,blue);     background:-webkit-radial-gradient (top,red,blue);     width:100px;}

4. Radial gradient-Uneven color:

. Divone {    background:radial-gradient (Red 10%,green 30%,blue 60%);} . Divtwo {    background:radial-gradient (Red 20%,blue 60%,green 10%);     Width:100px;}

5. Radial gradient-size designation , use of different size and size keywords,

The size parameter defines the scale of the gradient, the first parameter is the horizontal direction width, the second parameter is the vertical direction parameter, the corresponding keyword

• Closest-side
• Farthest-side
• Closest-corner
• Farthest-corner

. Divone{/*low version of Google also does not support, need to prefix*/background:radial-gradient (60% 30%, Closest-side, Red, blue);background:-webkit-radial-gradient (60% 30%, Closest-side, Red, blue);}. Divtwo{background:radial-gradient (60% 30%, Farthest-side, Red, blue);background:-webkit-radial-gradient (60% 30%, Farthest-side, Red, blue);}. Divthree{background:radial-gradient (60% 30%, Closest-corner, Red, blue);background:-webkit-radial-gradient (60% 30%, Closest-corner, Red, blue);}. Divfourth{background:radial-gradient (60% 30%, Farthest-corner, Red, blue);background:-webkit-radial-gradient (60% 30%, Farthest-corner, Red, blue);}

6. Repeating radial gradient-repeating-radial-gradient ()

{    background: repeating-radial-gradient (red, yellow 10%, green 15%);}

More:

CSS3 gradient (gradients)-linear gradient

CSS3 gradient (gradients)-Radial gradient