Implementation of color gradients in CSS (three ways)

This article gives you the content is about the CSS color gradient implementation (three ways), there is a certain reference value, the need for friends can refer to, I hope to help you.

！！ Note the IE9 and previous versions do not support gradients. Safari to add-webkit-prefix, opera to add-o-prefix, Firefox to add-moz-prefix!

One, Linear gradients (linear gradient)-down/up/left/right/diagonal

1. Down Code

<! DOCTYPE html>
Operating effect:


2. Up, change the two color order of the downward gradient. Replace the code above to run the result:


3. Left Code

<! DOCTYPE html>
Operation Result:


Note: From left-to-right gradients, the standard notation adds a direction word to the downward-gradient parenthesis. where safari5.1-6.0 plus left;opera11.1-12 and firefox3.6-15 plus right; in the browser order in the above code (the standard syntax must be placed at the end!!) ) can be shorthand for the first entry to write from the left, followed by three entries to the right end.

4. From right to left, modify the direction word on the left-to-right gradient code to get:


5. Diagonal direction

<! DOCTYPE html>
Operation Result:



Note: The direction of the word to follow up and down in the browser order of the first start position, the last three write to the location, the fourth item to be added to the standard item, note that the upper left top of the corresponding arrival entry is bottom right.

Second, angle gradient

1, above and below the diagonal gradient can be written through the angle gradient. In the expression of the color of the first bracket plus angle such as 0deg,45deg,90deg,180deg angle.

2, angle refers to the gradient direction and the angle between the horizontal line, counter-clockwise calculation, such as: 0deg refers to the gradient from the bottom to the top, 90deg refers to the gradient from left to right.

3, for Chrome,safari,firefox and other conversion formula for 90-X=Y,X as the standard degree.

Three, a plurality of color nodes: that is, in the direction of the color of the parentheses to add more than a few colors, the wording or follow the above-written direction and then write the color.

Iv. a gradient with transparency: that is, the color is represented by RGBA (0,0,0,0.2), where 0.2 represents transparency.

V. Repeated linear gradients: Use the repeating-linear-gradient () function, which specifies the gradient scale for each color in parentheses.

Vi. Radial Gradient Radial gradient

1. Radial gradient: You can specify the center of the gradient, the shape (circle circle or ellipse), size (Closest-side;farthest-side;closest-coner;farthest-corner). The default hub is center, the shape is ellipse (ellipse), and the gradient size is farthest-corner (to the farthest corner). Syntax: background:-radial-gradient (Center,shape,size,start-color,..., last-clor).

2, the color node uneven distribution of the radial gradient: that is, to specify the proportion of each color does not pass.

3. Repeated radial gradients: Use the Repeating-radial-gradient () function. Set the proportions for each color.