Home > Article > Web Front-end > How to achieve background linear gradient in css3
In CSS, you can use the "background-image" attribute and the "linear-gradient()" function to achieve a linear gradient of the element background. The syntax is "element {background-image:linear-gradient(gradient direction, color) 1, color 2..)”.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to realize linear gradient of background in css3
If you want to realize linear gradient of element background in css, you need to use the background-image attribute.
The background-image attribute is used to set the background style of the element. When this attribute is used in conjunction with the linear-gradient() function, the background of the element can be set to a linear gradient style.
The linear-gradient() function is used to create an image that represents a linear gradient of two or more colors.
To create a linear gradient, you need to specify two colors. You can also achieve gradient effects in different directions (specified as an angle). If the direction is not specified, the gradient will default from top to bottom.
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#grad1 {
height: 300px;
background-image: linear-gradient(red, yellow ,red);
}
</style>
</head>
<body>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>
<div id="grad1"></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve background linear gradient in css3. For more information, please follow other related articles on the PHP Chinese website!