Home > Article > Web Front-end > How to achieve color gradient effect in css3
How to achieve color gradient effect in css3
- 王林Original
- 2020-11-16 14:36:373420browse
How to achieve color gradient effect in css3: You can use linear-gradient function and radial-gradient function to achieve linear gradient effect and radial gradient effect respectively, such as [linear-gradient(yellow, green)].
There are two types of css3 gradients: css3 linear gradient and css3 radial gradient.
(Learning video sharing: css video tutorial)
1. Linear gradient color gradient
Function:
linear-gradient () function is used to create an image that represents a linear gradient of two or more colors.
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Value:
direction Use the angle value to specify the direction (or angle) of the gradient.
color-stop1, color-stop2,... Used to specify the starting and ending colors of the gradient.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
height: 200px;
background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>2. Radial gradient
function;
radial-gradient() function uses radial gradient Create "image".
The radial gradient is defined by the center point.
In order to create a radial gradient you must set two stop colors.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Value:
1. shape Determine the type of circle
ellipse ( Default): Specifies an elliptical radial gradient.
circle: Specify the radial gradient of the circle
- farthest-corner (default): Specify the radius length of the radial gradient from the center of the circle to the corner farthest from the center
- closest-side: Specify the radial gradient The radius length is from the center of the circle to the side closest to the center
- closest-corner: Specifies the radius length of the radial gradient from the center of the circle to the corner closest to the center
- farthest-side: Specify the radius length of the radial gradient from the center of the circle to the side farthest from the center of the circle
- center (default): Set the ordinate value in the center of the radial gradient circle.
- top: Set the top to be the ordinate value of the center of the radial gradient circle.
- bottom: Set the bottom to the ordinate value of the center of the radial gradient circle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
height: 150px;
width: 200px;
background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>Related recommendations:The above is the detailed content of How to achieve color gradient effect in css3. For more information, please follow other related articles on the PHP Chinese website!