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

This article Xiaobian for you to introduce in detail "css3 how to define the gradient effect", the content is detailed, the steps are clear, the details are handled properly, I hope this "css3 how to define the gradient effect" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Css3 defines gradient syntax as follows: 1, "linear-gradient (gradient direction, color 1, color 2,...);", used to define linear gradients; 2, "radial-gradient (type of circle gradient size gradient position, color 1, color 2);", used to define radial gradients.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What does css3 define gradient syntax?

CSS3 gradient (gradients) allows you to show a smooth transition between two or more specified colors.

In the past, you had to use images to achieve these effects. However, by using CSS3 gradients (gradients), you can reduce download time and broadband usage. In addition, the elements of the gradient look better when zoomed in, because the gradient is generated by the browser.

CSS3 defines two types of gradients:

Linear gradient (Linear Gradients)-down / up / left / right / diagonal

Radial gradient (Radial Gradients)-defined by their center

CSS3 linear gradient

To create a linear gradient, you must define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can set a starting point and a direction (or an angle).

Grammar

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

Linear gradient-from top to bottom (default)

The following example demonstrates a linear gradient from the top. The starting point is red and slowly transition to blue:

* / grad1: linear-gradient (# e66465, # 9198e5);} linear gradient-from top to bottom when not supported by red; / * browser

A linear gradient from the top. The starting point is red and slowly transition to blue:

Note: gradients are not supported in Internet Explorer 9 and previous versions.

Output result:

CSS3 radial gradient

The radial gradient is defined by its center.

In order to create a radial gradient, you must also define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can also specify the center, shape (circle or oval) and size of the gradient. By default, the center of the gradient is center (for the center point), the shape of the gradient is ellipse (for oval), and the size of the gradient is farthest-corner (for the farthest corner).

Grammar

Background-image: radial-gradient (shape size at position, start-color,..., last-color)

Radial gradient-uniform distribution of color nodes (default)

123 # grad1 {height: 150px; width: 200px; background-color: red; / * display * / background-image: radial-gradient (red, green, blue) when not supported by browsers; / * standard syntax (must be placed last) * /} Radial gradient-uniform distribution of color nodes

Note: gradients are not supported in Internet Explorer 9 and previous versions.

Output result:

Read this, the "css3 how to define the gradient effect" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

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.