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

This article mainly introduces "how to use linear-gradient () in css". In daily operation, I believe many people have doubts about how to use linear-gradient () in css. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use linear-gradient () in css". Next, please follow the editor to study!

The basic syntax of linear-gradient ()

The syntax for linear gradients is:

Linear-gradient ([| to],)

Where = [left | right] | | [top | bottom]

The first parameter in the function specifies the gradient, which provides the direction for the gradient and determines where the color stops. It can be omitted, and if it is omitted, it will stop by default at the bottom.

The direction of the gradient can be specified in two ways:

1. Use

For the purpose of this parameter, the 0deg points up, and a positive angle indicates a clockwise rotation, so the 90deg points to the right.

If zero, the unit identifier can be omitted.

2. Use keywords (to)

If the parameter is to the top, right, down, or left, the angle gradient is 0degGe 90 degrees, 180deg or 270deg, respectively.

If the parameter is changed to specify a corner of the box (for example, the upper-left corner), the gradient line must be angled so that it points to the same quadrant as the specified angle and perpendicular to the line that intersects the two adjacent corners of the gradient box.

Starting at the center of the gradient box, extend the line at a specified angle in both directions. The end point is the point on the gradient line, where the line drawn perpendicular to the gradient line intersects the corner of the gradient box in the specified direction. The starting point is determined to be the same, but in the opposite direction.

For example:

Background:linear-gradient (45degpl whitejack)

At this point, the study on "how to use linear-gradient () in css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.