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

Most people do not understand the knowledge points of this article "what are the gradients in CSS3?", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article "what are the gradients in CSS3?"

The gradient in css3 can be divided into: 1, linear gradient, syntax is "linear-gradient (gradient direction, color 1, color 2,...)"; 2, radial gradient, syntax is "radial-gradient (circle type gradient size gradient position, color 1, color 2);".

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

What are the types of gradients in CSS3

CSS3 Gradient is divided into linear-gradient (linear gradient) and radial-gradient (radial gradient).

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

Radial gradient (Radial Gradients)-defined by their center

Linear gradient

The linear-gradient () function is used to create a picture that represents a linear gradient of two or more colors.

To create a linear gradient, you need to specify two colors, and you can also achieve a gradient in different directions (specified as an angle). If you do not specify a direction, the default gradient is from top to bottom.

CSS syntax

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

Direction specifies the direction (or angle) of the gradient with an angle value.

Color-stop1, color-stop2,... Lets you specify the start and end color of the gradient.

Examples are as follows:

123 # grad1 {height: 200px; background-color: red; / * display when linear is not supported * / background-image: linear-gradient (to bottom right, red, yellow);} Linear gradient-diagonal

A linear gradient starting from the upper left corner (to the lower right corner). The starting point is red and slowly transition to yellow:

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

Output result:

Radial gradient

The radial-gradient () function creates an "image" with a radial gradient.

The radial gradient is defined by the center point.

In order to create a radial gradient, you must set two stop colors.

CSS syntax

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

Shape determines the type of circle:

Ellipse (default): specifies the radial gradient of the ellipse.

Circle: specify the radial gradient of the circle

Size defines the size of the gradient, possible values:

Farthest-corner (default): specifies that the radius length of the radial gradient is the angle farthest from the center of the circle.

Closest-side: specifies that the radius length of the radial gradient is from the center of the circle to the nearest edge of the center

Closest-corner: specifies that the radius length of the radial gradient is from the center of the circle to the nearest angle to the center of the circle

Farthest-side: specifies that the radius length of the radial gradient is the edge farthest from the center of the circle

Position defines the position of the gradient. Possible values:

Center (default): sets the ordinate value of the center of the radial gradient circle in the middle.

Top: sets the ordinate value of the center of the radial gradient at the top.

Bottom: sets the ordinate value of the center of the radial gradient at the bottom.

Start-color,..., last-color are used to specify the start and end color of the gradient.

Examples are as follows:

123 # grad1 {height: 150px; width: 200px; background-color: red; / * display * / background-image: radial-gradient (red, yellow, green) when not supported by browsers; / * standard syntax (must be placed last) * /} # grad2 {height: 150px; width: 200px; background-color: red / * display * / background-image when the browser does not support it: radial-gradient (circle, red, yellow, green); / * Standard syntax (must be placed last) * /} Radial gradient-shape

Oval Ellipse (default):

Round Circle:

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

Output result:

The above is about the content of this article on "what are the gradients in CSS3?" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.