<style>
div {
width: 200px;height: 100px;
margin-top: 10px;
border: 1px solid #ddd;
}
.test {
background: linear-gradient(#fff, #000); 黑白渐变
}
.test2 {
background: linear-gradient(#fff, #f00 50%, #000); 白红黑渐变，平均分
}
.test3 {
background: linear-gradient(0deg 角度, #fff20%, #f00 50%, #000 80%);
}
.test4 {
background: linear-gradient(45deg 角度, #fff, #f00 50%, #000);
}
.test5 {
background: linear-gradient(to top right 朝着右上角, #fff, #f00 50%, #000);
}
</style>
</head>
<body>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
</body>