1.线性渐变
<!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>
div{
width: 300px;
height: 300px;
background: linear-gradient(45deg,red 0%,red 10%,blue 10%,blue 20%,red 20%,red 30%,blue 30%,blue 40%,red 40%,red 50%);
}
</style>
</head>
<body>
<!--
linear-gradient:point||angel color-stop color-stop......
第一个参数表示渐变的方向
to left 270deg
to right 90deg
to top 0deg
to bottom 180deg
-->
<div></div>
</body>
</html>
2.径向渐变
<!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>
div
{
width:300px ;
height: 300px;
background: radial-gradient(red,blue);
}
</style>
</head>
<body>
<!--
radial-gradient:shape||size at-postion color-stop color-stop
shape:circle产生正圆的渐变色
ellipse适配当前形状的渐变色
at postion:默认圆心
-->
<div></div>
</body>
</html>
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>
div{
width: 300px;
height: 300px;
background: repeating-linear-gradient(45deg,red 0%,red 10%,blue 10%,blue 20%)
}
</style>
</head>
<body>
<div></div>
</body>
</html>