1.角度
垂直上向き方向は0度で、時計回りの選択と垂直上向き方向のなす角度が角度です。
標準構文は、開始方向をサポートしていないことに注意してください。次に例を示します。
background: linear-gradient(top, red, blue);
開始角度を使用する場合は、家具のプレフィックスを使用します。
background: -ms-linear-gradient(top, red, blue);
background: -webkit-linear-gradient(top, red, blue);
background: -o-linear-gradient(top, red, blue);
background: --moz-linear-gradient(top, red, blue);
したがって、グラデーションの方向は上から下になり、次と同等になります。
background: linear-gradient(bottom, red, blue);
2.パーセンテージ
3、テストコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
display: flex;
flex-direction: row;
justify-content: center;
margin: 0 auto;
width: 100vw;
}
.item {
width: 300px;
height: 300px;
line-height: 300px;
margin: 10px auto;
font-size: 20px;
color: white;
text-align: center;
}
.lg1 {
background: linear-gradient(red, blue);
}
.lg2 {
background: linear-gradient(to top, red, blue);
}
.lg3 {
background: linear-gradient(45deg, red, blue);
}
.lg4 {
background: linear-gradient(90deg, red, blue);
}
</style>
</head>
<body>
<div id="container">
<div class="item lg1">linear-gradient(red, blue);</div>
<div class="item lg2">linear-gradient(to top, red, blue);</div>
<div class="item lg3">linear-gradient(45deg, red, blue);</div>
<div class="item lg4">linear-gradient(90deg, red, blue);</div>
</div>
</body>
</html>