css3-Gradient This property

Gradient

With the gradient no longer need to cut 1px of the diagram and repeat it.

-webkit-is a browser prefix that indicates that a particular browser is in the experimental phase of a property, and here by the way, write down the prefixes of each browser:

chrome/safari-webkit-

firefox-moz-

ie-ms-

opera-o-

For each browser to be able to identify, we have to write each prefix is written again ... By the same, only their own browser can recognize the attributes with their own prefixes.

Background-image:-webkit-linear-gradient (Top, red, blue);

Note that gradients are background-image and not background-color!

--------------------------------------------------------------------------------------------------

The prefix has, linear is linear, and gradient represents the gradient.

The first parameter indicates where to start (the default is top), there are: Top/right/bottom/left four values (linear can't write center, I'm okay to die try, and then egg 0.) 0), but can be combined with: Background-image:-webkit-linear-gradient (top left, red, blue); Represents the beginning of the upper-left corner.

Can also be expressed in degrees, the following is 0 deg:

Background-image:-webkit-linear-gradient (0deg, red, blue);

Here is 90deg:

Background-image:-webkit-linear-gradient (90deg, red, blue); It can be understood to rotate counterclockwise by 90deg (who cares about this ...).

--------------------------------------------------------------------------------------------------

The second and third parameters are not the only two, see how many colors you want him to change, such as you can play:

Cough, can see repeat how many times add I q:758325009, give serious people a big red envelope.

Color parameters are more than just writing colors, you can also set the color from where to start the gradient:

Background-image:-webkit-linear-gradient (top left, red, blue 25%, yellow 90%); This percentage is relative to the direction of the gradient, which means that the color is completely changed to this position. Say the trouble, look:

--------------------------------------------------------------------------------------------------

In addition to being able to change in one direction, it is possible to radial a radial gradient.

Background-image:-webkit-radial-gradient (center center, Red, blue); At this point the first parameter can be written to center center.

--------------------------------------------------------------------------------------------------

In particular, when a radial gradient, you can use 0px 0px and 30% 30%, respectively, the radiation center relative to the X-axis and the Y-axis offset, as follows:

Background-image:-webkit-radial-gradient (0px 0px, red, blue);

--------------------------------------------------------------------------------------------------

Background-image:-webkit-radial-gradient (25% 25%, red, blue);

--------------------------------------------------------------------------------------------------

Not all of the above written, in this point, there is misleading also please advise ^^.

css3-Gradient This property