CSS设置背景颜色渐变

By | 2020/03/01
得益网络技术的发展,现在CSS可以很方便的设置背景颜色渐变, 大多数浏览器都支持了。
1 从上到下渐变:
background: linear-gradient(orange,blue);
从上到下渐变

2 从左到右渐变:
background: linear-gradient(to right, black, white);
从左到右渐变
3 对角(从左上角到右下角)渐变:
background: linear-gradient(to bottom right, black, white);
4 背景透明度设置:
    rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,
0表示透明度为100%,1表示透明度为0%。
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
5 径向渐变
默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。为了创建一个径向渐变,必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。可以指定渐变的中心、形状(圆形或椭圆形)、大小。
background: radial-gradient(black, white, blue); //默认椭圆向外渐变
background: radial-gradient(circle, red, black, white);//圆形向外部渐变