One, linear gradient (linear-gradient)
To implement a linear gradient, you need to define at least two colors, which are the colors you want to transition smoothly, that is, one color is the starting point and the other is the end point.
Grammar:
Background:linear-gradient (Colora,colorb)
Colora is the start color and Colorb is the end point color.
You can also define the direction of the gradient, from top to bottom, from left to right, or from the top-left to the lower-right corner of the gradient (from top to bottom by default).
Grammar:
Background:linear-gradient (Direction,colroa,colorb)
Direction represents the direction of the gradient, directly write the direction of the starting point, for example: the gradient direction from left to right, write directly to the Ieft, the gradient direction from bottom to top, write directly bottom, the gradient direction from the upper left to the lower right corner, written as background: Linear-gradient (left Top,colora,colorb).
CSS linear gradient case
Example: from the lower left to the upper right, from red to blue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 400px;
height: 200px;
background: -webkit-linear-gradient(left bottom,red,blue);
background: -o-linear-gradient(left bottom,red,blue);
background: -moz-linear-gradient(left bottom,red,blue);
background: linear-gradient(left bottom,red,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2. Radial-gradient
A CSS3 radial gradient is a circular or oval gradient. Colors no longer change along a straight axis, but emit from all starting points in all directions. It is more complicated than a linear gradient.
You can define its center (the default gradient is center), shape (prototype or oval), size, etc.
Syntax: background: radial-gradient (position, shape, size, start-color, last-color)
position
<length>: Use the length value to specify the abscissa or ordinate of the center of the radial gradient circle. Can be negative.
<percentage>: Specify the abscissa or ordinate of the center of the radial gradient as a percentage. Can be negative.
left: Set the abscissa of the center of the radial gradient on the left.
center: Sets the abscissa or ordinate of the center of the radial gradient circle in the middle.
right: Set the abscissa of the center of the radial gradient on the right.
top: Set the ordinate value at the top as the center of the radial gradient.
bottom: Set the ordinate value at the bottom as the center of the radial gradient.
shape
Can be the value circle or ellipse. circle means circle, ellipse means oval. The default is ellipse.
size
closest-side: specifies the radial length of the radial gradient from the center of the circle to the side closest to the center of the circle;
closest-corner: specifies the radius of the radial gradient from the center of the circle to the corner closest to the center of the circle;
farthest-side: specifies the radial length of the radial gradient from the center of the circle to the side furthest from the center of the circle;
farthest-corner: Specifies the radius length of the radial gradient as the farthest angle from the center of the circle; the default value
css radial gradient case
Example: Start the gradient from 60% and 55%. Specify the radial length of the radial gradient from the center of the circle to the edge closest to the center of the circle. The color of the gradient from the inside to the outside is blue, green, yellow, and black.
:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 400px;
height: 200px;
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Above, the related usages of gradients are introduced, including meridional gradients and linear gradients, I hope to help you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
