How to implement the gradient effect using gradient in CSS3

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

Application of linear gradient in WebKit

CSS code copy content to clipboard

-webkit-linear-gradient ([ | | ,]? , [, ]*)//Latest Publish writing grammar

The first parameter represents the gradient type, either linear (linear gradient) or radial (radial gradient).

The second and third arguments are a pair of values, representing the gradient start and end points, respectively. This pair of values can be represented in a coordinate form, or it can be represented by a key value, such as left

Top (upper left corner) and left bottom (bottom left-hand corner).

The fourth and fifth parameters, respectively, are two color-stop functions. The Color-stop function accepts two arguments, the first representing the position of the gradient, 0 is the starting point, 0.5 is the midpoint, 1 is the end point, and the second represents the color of the point.

The application of linear gradient in Mozilla

Grammar:

CSS code copy content to clipboard

-moz-linear-gradient ([ | | ,]? , [, ]* )

Parameters:

There are three parameters, the first parameter represents the direction of the linear gradient, top is from up to down, left is left-to-right, if defined

Top, which is from the upper left to the lower right corner. The second and third parameters are the start and end colors respectively. You can also insert more arguments between them to indicate a variety of color gradients.

Background gradients are implemented in CSS3

CSS code copy content to clipboard

　　 = [

| |

　　 | ]

One: Linear gradient

In CSS3, you can use linear-gradient to implement a background linear gradient.

CSS code copy content to clipboard

= Linear-gradient ([[ | to],]? [, ]+) = [left | rightright] | | [Top | bottombottom]

In the FF browser, the style code needs to be written as "-moz-linear-gradient", and the Chrome browser needs to be written in the form of "-webkit-linear-gradient".

Here the color value can also be divided into many segments, such as

CSS code copy content to clipboard

Background-image:linear-gradient (Top, #eff6fb, #d3e4f3 68%);

CSS code copy content to clipboard

Background-image:linear-gradient (left, #FF0000, #FFA500 13.0%, #FFFF00 26.0%, #0000FF 39.0%, #008000 52.0%, #4B0082 65% , #EE82EE 78%)

Display effect:

The gradient direction also specifies the keyword.

CSS code copy content to clipboard

Background-image:linear-gradient (top left, #eff6fb 10%, #d3e4f3 68%);

Effect:

The gradient direction can also specify an angle.

CSS code copy content to clipboard

Background-image:linear-gradient (0deg, #eff6fb 10%, #d3e4f3 68%);

The 0deg gradient begins at the left, 90deg at the bottom, 180deg on the right, and 270deg at the top. Therefore, we can think of the angle as the opposite. The clockwise order.

Such as:

Transparency (transparency): Transparent gradients are also supported. This is quite useful, for example, when you stack multiple backgrounds. Here is a combination of two backgrounds: a picture, a white to transparent linear gradient.

Two: Radial gradient

Radial gradients are similar to linear gradients

CSS code copy content to clipboard

　　 = Radial-gradient ([[ | | ] [ at]? [ , ]+ )

1. Color

Define a color gradient directly. Background:-moz-radial-gradient (red, yellow, #1E90FF);

Effect as shown:

Specify gradient for position color: background:-moz-radial-gradient (red 5, Yellow 25%, #1E90FF 50%);

Effect if:

2. Shape

The starting position is the same as the shape is different.

CSS code copy content to clipboard

Background-image:-moz-radial-gradient (Bottombottom left,circle,red, yellow, #1E90FF);

Background-image:-moz-radial-gradient (Bottombottom left,ellipse,red, yellow, #1E90FF);

Effect as shown:

3. Size: Different options (Closest-side, Closest-corner, Farthest-side, Farthest-corner, contain, or cover) of size point to points that are used to define the size of a circle or ellipse.

Third: Repeat gradient (repeating gradients)

Repeat a gradient, and you can use-moz-repeating-linear-gradient and-moz-repeating-radial-gradient.

CSS code copy content to clipboard

. repeating_radial_gradient_example {

Background:-moz-repeating-radial-gradient (black, black 5px, white 5px, white 10px); }

. repeating_linear_gradient_example {

Background:-moz-repeating-linear-gradient (top left-45deg, red, red 5px, white 5px, white 10px); }