CSS3 gradient background color compatible with IE9 + and css3ie9 in various directions

CSS3 gradient background color compatible with IE9 + and css3ie9 in various directions

Background Color: In addition to solid colors, you can also combine multiple colors to form a gradient background color to enrich the page.

Gradient backgrounds are divided into two types:

1. linear gradient;

2. Ring gradient;

 

Linear Gradient

Linear gradient is divided into three gradient types: horizontal, vertical, and diagonal gradient

Syntax:

<Linear-gradient>= Linear-gradient ([[<angle> | to <aside-or-corner>],]? <Color-stop> [, <color-stop>] +)

<Side-or-corner>= [Left | right] | [top | bottom]

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

<Angle>: Specify the gradient direction with the angle value.

To left: Set the gradient from right to left;

To right: Set the gradient from left to right;

To top: Set the gradient from bottom to top;

To bottom: Set the gradient to top to bottom;

<Color-stop>: Set the start and end colors of the specified gradient.

<Color>: Specifies the color.

<Length>: Specify the start and end color positions with the length value. Negative value not allowed

<Percentage>: Specify the start and end color positions with percentages.

 

Background: linear-gradient (parameter 1, parameter 2, parameter 3, parameter 4... parameter N)

Parameter 1: Optional. If this parameter is set, the Write direction is as follows: to right, that is, the gradient direction is from left to right. If this parameter is not set, the gradient is changed from top to bottom by default.

Parameter 1': It is basically the same as parameter 1. It is written in the case of-webkit-,-moz-, and-o-prefixes. For example, left indicates the starting position of the gradient direction.

Parameter 2: gradient start color. You can enter rgba () or # fff or white. The following percentage indicates the color proportion. For example, # fff 50% indicates that the white color proportion is 50%.

Parameter 3: If there is no parameter next to it, it is the gradient termination color, which is consistent with the optional attribute of parameter 2.

Parameter 4... parameter N: the gradient color node that can be added. The last color is the gradient termination color.

 

Example:

Linear-gradient (# fff, #75aaa3 );

Linear-gradient (to bottom, # fff, #75aaa3 );

Linear-gradient (to top, #75aaa3, # fff );

Linear-gradient (180deg, # fff, #75aaa3 );

Linear-gradient (to bottom, # fff 0%, #75aaa3 100% );

However, you must be compatible with the following browsers:

// Bottom-up

# Text. btt {background:-webkit-linear-gradient (bottom, # fff, #75aaa2); background:-o-linear-gradient (bottom, # fff, #75aaa2); background: -moz-linear-gradient (bottom, # fff, #75aaa2); background: linear-gradient (to top, # fff, #75aaa2 ); /* standard syntax (must be placed at the end )*/}

// With transparency

# Text. opac {background:-webkit-linear-gradient (rgba (256,256,256, 0), #75aaa2); background:-o-linear-gradient (rgba (256,256,256, 0 ), #75aaa2); background:-moz-linear-gradient (rgba (256,256,256, 0), #75aaa2); background: linear-gradient (rgba (256,256,256, 0 ), #75aaa2);/* standard syntax (must be placed at the end )*/}