代码:
background-image: linear-gradient() 线性渐变
background-image: radial-gradient( ) 径向渐变
<!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>
</head>
<style>
div{
width: 200px;
height: 30px;
border: 1px solid rebeccapurple;
background-image: linear-gradient(to right,red,blue);
/* 表示线性渐变,方向向右,从红色开始到蓝色 */
background-image: linear-gradient(to top,red,blue);
/* 表示向上进行线性渐变 */
}
#abc{
width: 200px;
height: 200px;
background-image: radial-gradient( red,blue,pink);
}
</style>
<body>
<div></div>
<!-- background-image: linear-gradient() 线性渐变 -->
<div id="abc"></div>
<!-- background-image: radial-gradient( ) 径向渐变 -->
</body>
</html>