<style>
div {width: 200px;height: 100px;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>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
</body>