上诉效果CSS代码
body {
margin: 0;
width: 100%;
height: 100vh;
}
.nephew1 {
height: 25vh;
width: 100%;
background: linear-gradient(to right, #bdc3c7, #2c3e50);
/* 简单的渐变色过渡 */
}
.nephew2 {
height: 25vh;
width: 100%;
background: linear-gradient(to bottom, #2980b9, #ffffff);
/* 可以调整过渡方向 */
}
.nephew3 {
height: 25vh;
width: 100%;
background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d)
/* 甚至可以设置多个颜色 */
}
.nephew4 {
height: 25vh;
width: 100%;
background: linear-gradient(35deg, #bdc3c7, #2c3e50, rgba(206, 6, 6, 0.877));
/* 调整角度可以实现斜向过渡 */
}
<body>
<div class="nephew1"></div>
<div class="nephew2"></div>
<div class="nephew3"></div>
<div class="nephew4"></div>
</body>