代码语言：javascript复制
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
.container {
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
margin: 0 50px;
border-radius: 50%;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
font-size: 5px;
}
.box:nth-child(1) {
background: linear-gradient(to bottom, yellow, red);
}
.box:nth-child(2) {
background: linear-gradient(to right, yellow, red);
}
.box:nth-child(3) {
background: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<!--此处写代码-->
<div class="container">
<div class="box">上向下发生渐变</div>
<div class="box">左到右发生渐变</div>
<div class="box">左上角到右下角发生渐变</div>
</div>
</html>
在CSS中，给.container设置了justify-content: center;和align-items: center;属性，使得三个div元素在水平和垂直方向上都居中显示。另外，添加了box-shadow和border-radius属性，给三个div元素添加了阴影和圆角效果。在.box中，添加了margin: 0 50px;属性，使得三个div元素之间的间隔为50px。
