Home > Article > Web Front-end > How to change the angle of gradient in css3
How to change the angle of gradient in css3
- WBOYOriginal
- 2022-04-28 14:45:032378browse
In CSS3, you can use the "linear-gradient" function to change the angle of the gradient. This function is used to create an image that represents a linear gradient of two or more colors. The first parameter is used to set the gradient. The angle or direction, the syntax is "color attribute: linear-gradient (gradient angle, color...)".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to change the angle of gradient in css3
linear-gradient The syntax of linear gradient is:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
The main parameters are:
direction Specifies the direction (or angle) of the gradient using an angle value.
color-stop1, color-stop2,... are used to specify the starting and ending colors of the gradient.
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#grad1 {
height: 30px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 30px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 30px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 30px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>
<h3>线性渐变 - 使用不同的角度</h3>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to change the angle of gradient in css3. For more information, please follow other related articles on the PHP Chinese website!