CSS3 Gradient Gradient Detailed

These days read a book of HTML5, which used a lot of gradient effect on the background of the page, so write something about the gradient gradient here.

There are two kinds of gradient in CSS3, the linear gradient (linear-gradient) and the radial gradient (radial-gradient), respectively, the effect of linear and radial gradients (with flash, used O (∩_∩) o haha ~.?)

First of all, WebKit's browser (Google Chrome, etc.)

Two methods are defined for gradient under WebKit:

1. -webkit-linear-gradient
2. -webkit-gradient

The-webkit-linear-gradient method defines a linear gradient, preceded by a code and effect

Background:-webkit-linear-gradient (top left, #ccc, #369);

This example is from the upper-left corner of the #ccc gray gradient to the lower-right corner of the #369 blue, from the code can be seen-webkit-linear-gradient the first parameter is to describe the gradient direction, top refers to from top to bottom, left refers to from right to bottom, top Left refers to the bottom right, from top to bottom, and the color values in the back refer to the start and end colors, which can add a lot of colors and set the color range. As the following example

Background:-webkit-linear-gradient (top left, #ccc 10%, #3f3 50%, #369);

Other browsers, such as Firefox or IE, gradient usage and-webkit-linear-gradient in WebKit, become just the prefix of the manufacturer, for example:

-moz-linear-gradient,-o-linear-gradient,-ms-linear-gradient.

And then again,-webkit-gradient.

-webkit-gradient different content than-webkit-linear-gradient is the ability to set a linear or radial gradient

Let's talk about linear gradients:

Background:-webkit-gradient (Linear,center top,right bottom,from (#c33), Color-stop (50%, #ccc), to (#cfc));

As you can see from the code above, its first parameter is to set whether it is a linear or radial gradient, and the linear gradient is linear

The second parameter sets where the gradient begins, where the value needs to have two parts (x y), and x is the horizontal position, such as left, right, or center, and y is used to set the vertical position, such as top or bottom.

The third parameter sets the gradient to where. Then there is a from and a to that is used to indicate which color to change from that color to, and color-stop is used to set the color between from and to.

Let's talk about it. Set radial gradient, also first on the code ~

Background:-webkit-gradient, Radial, 102 70,60, from (#c33), to (#cdc), Color-stop (80%, #00b5e2));

The grammar of the progressive behavior to the gradient is

-webkit-gradient (Radial, Inner_center, Inner_radius, Outer_center, Outer_radius,/stop ...)

Where Inner_center represents the inner center point, the radial gradient start ring, the Inner_radius represents the inner radius, the radial gradient start circle, the Outer_center represents the center point of the outer gradient end circle, and the Outer_radius represents the radius of the outer gradient end circle.

CSS3 Gradient Gradient Detailed