How to change the angle of gradient in css3

WBOY
Release: 2022-04-28 14:45:03
Original
2369 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template