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 gradientSyntax: 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 AttributesThe 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 radiusSyntax: 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 keywordsSyntax: 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!