css多个方向渐变 |html css 页面

/*线性渐变*/
background: linear-gradient(to right, #ff0000, #0000ff);
/*径向渐变*/
background: radial-gradient(ellipse at center, #ff0000, #0000ff);
/*角度渐变*/
background: linear-gradient(45deg, #ff0000, #0000ff);

线性渐变指的是从一个方向开始渐变至另一个方向，可以使用to关键字来定义渐变方向。以上代码展示了从左到右的渐变效果，即红色渐变成蓝色。

径向渐变是以中心点为基准，从一个颜色到另一个颜色径向渐变效果。以上代码展示的是一个椭圆形径向渐变效果，即红色渐变成蓝色。

角度渐变则是从指定的角度方向开始渐变指定的颜色，自动进行反转渐变。以上代码展示了从左上方向右下方45度角度上进行的渐变，即红色渐变成蓝色。