一、渐变属性
渐变的属性: background/background-image
渐变有:线性渐变、径向渐变
二、线性渐变 linear-gradient
参数1,表示渐变的方向 默认是从上到下的,也可以使用to
参数2,表示颜色
参数3,表示颜色
参数4…
比如 linear-gradient(to right bottom, pink, skyblue);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background: linear-gradient(to right bottom, pink, skyblue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三、径向渐变 radial-gradient
参数1: 渐变的起点位置
参数2: 渐变的形状
参数3: 渐变的大小
参数4: 表示颜色
参数5: 表示颜色
比如 radial-gradient(pink, skyblue);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background: radial-gradient(pink, skyblue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>