<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渐变</title>
<style>
/* 线性渐变（Linear Gradients）
至少两种颜色 */
.box {
width: 400px;
height: 300px;
background-image: linear-gradient(#77c8c8, #55cc55, #fef729);
}
.box1 {
width: 400px;
height: 300px;
background-image: linear-gradient(to right, #e80003, #92008e, #3500fa);
}
.box2 {
width: 400px;
height: 300px;
background-image: linear-gradient(to right bottom, #4f6b89, #2c6b64, #066b3c);
}
.box3 {
width: 400px;
height: 300px;
background-image: linear-gradient(to right, #77c8c8, #55cc55, #fef729 50%);
}
.box4 {
width: 400px;
height: 300px;
background-image: linear-gradient(45deg, #77c8c8, #55cc55, #fef729);
}
/* 径向渐变（Radial Gradients）
至少两种颜色 */
.box5 {
width: 200px;
height: 200px;
background-image: radial-gradient(circle,#4dccc8,#5b5dcc,#bc6ccc);
}
/* circle 表示圆形，ellipse 表示椭圆形 */
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<br><br>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
</body>
</html>