What are the gradient properties of css3?

stepping attributes are a new attribute added in the CSS3 specification. It allows us to make rich color gradient effects on the webpage, add more beauty and visual effects to the webpage to increase the webpage . Next, let’s introduce the specific content of CSS3 gradient properties.

CSS3 gradient properties are divided into linear gradients and radial gradients, and linear gradients are divided into horizontal and vertical directions.

1. Linear gradient attributes

1. Horizontal linear gradient

Syntax: background: linear-gradient(to right, #00FFFF, #FF00FF);

Analysis: to right represents a gradient from left to right, #00FFFF and #FF00FF represent changing colors, and multiple sets of color values ​​can be set.

2. Vertical linear gradient

Syntax: background: linear-gradient(to bottom, #00FFFF, #FF00FF);

Analysis: to bottom means from top to bottom Lower gradient, #00FFFF and #FF00FF represent changing colors, and multiple sets of color values ​​can be set.

2. Radial Gradient Attributes

The syntax of radial gradient is similar to that of linear gradient. There are also two types: the length value of the radius and two position keywords. Among them, the first position keyword represents the center of the circle, the left is a negative value in the x-axis direction, the right value is a positive value, the y-axis direction is a negative value, and the bottom is a positive value; the second position keyword represents the starting position of the gradient. The rules for values ​​are the same as for the first positional keyword.

1. The length value of the radius

Syntax: background: radial-gradient(ellipse farthest-corner at 45px 45px, #00FFFF, #FF00FF);

Analysis: ellipse It is represented as an ellipse, the farthest-corner is represented as the farthest corner, 45px and 45px are the center coordinates of the circle, #00FFFF and #FF00FF represent the color of the gradient, and multiple sets of color values ​​can be set.

2. Two position keywords

Syntax: background: radial-gradient(at top left, #00FFFF, #FF00FF);

Analysis: at top left means The gradient center is in the upper left corner, #00FFFF and #FF00FF represent changing colors, and multiple sets of color values ​​can be set.

The above is a detailed introduction to the CSS3 gradient attribute. You can create many cool effects by using the CSS3 gradient attribute. It plays a great role in beautifying the web page.

The above is the detailed content of What are the gradient properties of css3?. For more information, please follow other related articles on the PHP Chinese website!