css 各个方向渐变(从左到右、从上到下、从左上到左下)
从左到右
HTML代码:
<div class="bodyDiv"></div>
css代码:
.bodyDiv {
height: 200px;
width: 200px;
margin: auto;
//从左到右
background: linear-gradient(to right, #EAE5C9, #6CC6CB);
}
实现结果:
从上到下
HTML代码:
<div class="bodyDiv"></div>
css代码:
.bodyDiv {
height: 200px;
width: 200px;
margin: auto;
//从上到下
background: linear-gradient(to bottom, #CCFBFF, #EF96C5);
}
实现结果:
从左上角到右下角
HTML代码:
<div class="bodyDiv"></div>
css代码:
.bodyDiv {
height: 200px;
width: 200px;
margin: auto;
//从左上角到右下角
background: linear-gradient(to bottom right, #EAD6EE, #A0F1EA);
}
实现结果: