Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of the use of css gradients for you. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Use Angl

If you want more control over the direction of the gradient, you can define an angle instead of predefining the direction (tobottom, totop, toright, toleft, tobottomright, etc.).

Grammar

Background-image:linear-gradient (angle,color-stop1,color-stop2)

The angle is the angle between the horizontal line and the gradient line, calculated counterclockwise. In other words, 0deg will create a gradient from bottom to top, and 90deg will create a gradient from left to right.

However, note that many browsers (Chrome, Safari, firefox, etc.) use the old standard, that is, 0deg will create a gradient from left to right, and 90deg will create a gradient from bottom to top. Conversion formula 90-x=y, where x is the standard angle and y is the non-standard angle.

The following example shows how to use angles on linear gradients:

Example

A linear gradient with a specified angle:

# grad {

Background-image:linear-gradient (- 90degthr redline yellow)

}

Use multiple color nodes

The following example shows how to set up multiple color nodes:

Example

A linear gradient from top to bottom with multiple color nodes:

# grad {

Background-image:linear-gradient (red,yellow,green)

}

The following example shows how to create a linear gradient with rainbow colors and text:

Example

# grad {

/ * Standard syntax * /

Background-image:linear-gradient (toright,red,orange,yellow,green,blue,indigo,violet)

}

This is the end of this article on "sample analysis of the use of css gradients". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.