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

This article is about how css3 defines gradients. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Syntax: 1. "background:radial-gradient (type size position, color 1, color n..)" Set element radial gradient style; 2, "background:linear-gradient (direction, color 1, color n..)" Sets the linear gradient style of the element.

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

In css, there is a radial-gradient () function to create a radial gradient for the element, and the linear-gradient () function to create a linear gradient style for the element.

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

The radial gradient is defined by the center point. Two termination colors must be set in order to create a radial gradient.

The syntax is as follows:

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

The values of the property are as follows:

Examples are as follows:

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:

2. 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.

The syntax is as follows:

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

Examples are as follows:

Rookie tutorial (runoob.com) # grad1 {height: 200px; background-image: linear-gradient (red, yellow, blue);} Linear gradient-head to bottom

A linear gradient from the head, from red to yellow to blue:

Note: gradients are not supported in Internet Explorer 9 and earlier IE browsers.

Output result:

Thank you for reading! This is the end of the article on "how css3 defines gradients". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it 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.