A detailed description of the Lineaer-gradient use method in CSS3

Grammar:

<linear-gradient> = Linear-gradient ([[<angle> | To <side-or-corner>],]? <color-stop>[, <co lor-stop>]+)

<side-or-corner> = [left | right] | | [Top | bottom]

<color-stop> = <color> [<length> | <percentage>]?

Value:

The following values are used to indicate the direction of the gradient, which can be set using an angle or a keyword:

<angle>:

Specifies the direction (or angle) of the gradient with an angle value.

To left:

Sets the gradient to right-to-left. Equivalent: 270deg

to right:

Sets the gradient from left to right. Equivalent: 90deg

To top:

Sets the gradient from bottom to top. Equivalent: 0deg

To bottom:

Sets the gradient from top to bottom. Equivalent to: 180deg. This is the default value, which is equivalent to leaving it blank.

<color-stop> specifies the starting and ending colors for the gradient:

<color>:

Specifies the color.

<length>:

Specify the starting and ending color position with a length value. Negative values are not allowed

<percentage>:

Specify the start and end color position in percent.

Description

Creates an image with a linear gradient.

If you want to create a diagonal gradient image, you can use a multi-keyword approach such as to top left.

Draw one of the simplest linear gradients in the default gradient direction

Example code:

Linear-gradient (#fff, #333); Linear-gradient (to Bottom, #fff, #333) linear-gradient (to Top, #333, #fff); Linear-gradient (180deg, #fff, #333); Linear-gradient (to Bottom, #fff 0, #333 100%);

Compatibility:

1. Using outdated syntax:-webkit-gradient (linear,...)

2. ie6.0-9.0 uses a private filter to achieve this effect: progid:DXImageTransform.Microsoft.Gradient ()

<! DOCTYPE html>
"Recommended"

1. CSS3 Free Video Tutorial

2. In-depth explanation CSS3 oblique linear gradient lineaer-gradient

3. A detailed explanation of linear-gradient parameters in CSS3

4. Syntax of CSS linear-gradient ()

5. Examples of linear-gradient in CSS3