标签：background gradient image 中心点渐变 linear

渐变背景

原文链接：https://blog.csdn.net/Mq_sir/article/details/121053167

一、线性渐变(向上\下\左\右,左上，右上等等)

通过属性Inear-gradient来定义一个线性渐变

1、to+方向

background-image:linear-gradient(方向\角度,颜色1,颜色2,颜色3);
方向：在关键字to后面加上top、bottom、right、left中的一个或者多个关键字

.c1{    
    /*默认从上往下渐变*/    
    background-image:linear-gradient(#ff0000,#fff200);
}
.c2{    
    /*可以自己设置渐变方向：to 方向   从下往上渐变*/    
    background-image:linear-gradient(to top,#ff0000,#fff200);
}
.c3{    
    /*可以使用多个方向，例如to right bottom,表示从左上到右下*/    
    background-image:linear-gradient(to right bottom,#ff0000,#fff200);
}
.c5{
    /*颜色也可以使用rgba，这样就可以调整透明度*/
    background-image: linear-gradient(rgba(0,0,0,0.5),white);
}

2、使用角度来定义方向

使用角度取代预定义的方向，值0deg等于向上(to top)。值90deg等于向右(to right)，值180deg等于向下(to bottom)

我们填的是终点的角度，起点为对角线的角度

.c4{    
    /*表示起点从300度到60度渐变*/    
    background-image: linear-gradient(60deg,#ff0000,#fff200,#1e9600);
}

300度到60度渐变

3、平铺的线性渐变

repeating-linear-gradient()函数用于重复线性渐变

.c6{    
    /*从左下角开始绘制渐变，前20px是绿色，再30px渐变到红色，最后40px渐变到黄色，浏览器会自动补充剩下的背景*/    
    background-image: repeating-linear-gradient(45deg,#1e9600 20px,#ff0000 30px,#fff200 40px);
}

二、径向渐变(由中心定义)

径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。有一种水波扩散的感觉。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape 为椭圆形，size 为最远角，position 为中心。
shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。

size 参数定义渐变的大小。它可接受四个值：
closest-side ：从中心点向外扩展渐变，到离中心点最近的一边结束。
farthest-side ：以离渐变中心点最远的那一边计算圆的半径
closest-corner ：以离渐变中心点最近的元素顶角计算渐变的范围。
farthest-corner ：以离渐变中心点最远的顶角计算圆的半径

径向渐变

1、均匀间隔的色标(默认)

默认是椭圆形

.c7{
    background-image: radial-gradient(#ff0000,#fff200);
}

可以设置圆形

background-image: radial-gradient(circle, red, yellow, green);

2、设置径向渐变的中心点

用关键字 at 后面加上 position 属性支持的定位关键字和数值，指定渐变中心的位置。

background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
把中心点设置在元素的距离左上角（60% 55%）。并以 以离渐变中心点最远的顶角计算圆的半径。

3、平铺的径向渐变

background-image: repeating-radial-gradient(circle at 20% 40%,#eea2a2 20px, #57c6e1 20px, #b49fda 40px, #7ac5d8 40px, #b49fda 60px, #4F9C9C 60px, #57c6e1 80px, #99CCCC 80px, #eea2a2 100px);