The method of Linear gradient and Radial gradient in css3
This article mainly explains "the method of linear gradient and radial gradient in css3". The content of the explanation in this article is simple and clear, and it is easy to learn and understand. please follow the editor's train of thought to study and learn "the method of linear gradient and radial gradient in css3".
CSS3 gradient (gradients) allows you to show a smooth transition between two or more specified colors.
CSS3 defines two types of gradients:
Linear gradient (Linear Gradients)-down / up / left / right / diagonal
Radial gradient (Radial Gradients)-defined by their center
Document
Div {
Margin: 20px
Display: inline-block
Width: 150px
Height: 150px
Text-align: center
Line-height: 150px
}
.box1 {
/ * evenly distributed * /
Background-image: radial-gradient (red, blue)
}
.box2 {
/ * uneven distribution * /
Background-image: radial-gradient (red 5%, blue 18%, orange 50%)
}
1. Linear-gradient (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 also set a starting point and a direction (or an angle)
Syntax:
Background-image: linear-gradient (direction, color-stop1, color-stop2,...)
Direction indicates the gradient direction, while color-stop1 and color-stop2 represent the gradient color.
1. By default, the linear gradient is from top to bottom, that is, you don't have to set the direction parameter.
Div {
Height: 200px
Background-image: linear-gradient (red, blue)
}
A linear gradient from the top. The starting point is red and slowly transition to blue:
Radial-gradient (Radial gradient)
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).
Syntax:
.box1 {
Background-image:repeating-radial-gradient (red 0px, red 15px, 30px, blue 15px)
}
.box2 {
Background-image:repeating-radial-gradient (red 2% Magazine black 15% MagneBlue 20%)
}
Thank you for your reading, the above is the content of "linear gradient, radial gradient method in css3". After the study of this article, I believe you have a deeper understanding of the problem of linear gradient and radial gradient in css3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
