How to change the angle of gradient in css3-Front-end Q&A-php.cn

How to change the angle of gradient in css3

WBOY

Release： 2022-04-28 14:45:03

Original

2351 people have browsed it

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...)".

How to change the angle of gradient in css3

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, ...);

Copy after login

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>

Copy after login

Output result:

How to change the angle of gradient in css3

(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!