css渐变

渐变 、

渐变指的是颜色的渐变，从一个颜色慢慢过渡到另一个颜色。渐变分两种，一种是沿着一条直线发生渐变，另一种围绕一个圆心发生渐变。

线性渐变、

background-image: linear-gradient(to 上/下/左/右, 颜色, 颜色, ....); /* 方向可以是左上，右下。。。也可以是一个角度deg，方向是可选项 */
background-image: repeating-linear-gradient(to 上/下/左/右, 颜色 百分比, 颜色 百分比, ....); /* 表示0~20%，20%~40% .. 其余不满100%的重复渐变 */

例、

<style>
    .box{
        width: 500px;
        height: 200px;
        border: 3px solid #000;

        /* 渐变
        直接写多个颜色，自动会进行渐变
        */
        /* background-image: linear-gradient(red, blue, yellow); */
        /* background-image: linear-gradient(red, orange, yellow, green, cyan, blue, purple); */

        /* 设置渐变方向：在颜色之前设置，。使用  to 方向关键字 */
        /*
            方向关键字：
                top
                bottom
                left
                right
                left top
                left bottom
                right top
                right bottom

        */
        /* background-image: linear-gradient(to left top, red, blue); */

        /* 重复渐变 */
        /* background-image: repeating-linear-gradient(to right, red 20%, blue 40%); */

        /* 斑马线 */
        background-image: repeating-linear-gradient(to right, #999 0, #999 5%, white 5%, white 10%);
    }
</style>
<div class="box"></div>

 径向渐变、

background-image: radial-gradient(颜色, 颜色); /* 默认圆心为div中心，默认形状为椭圆 */
background-image: radial-gradient(形状, 颜色, 颜色); /* circle表示圆形，ellipse表示椭圆 */
background-image: radial-gradient(at x y, 颜色, 颜色); /* x和y是圆心的x和y */
background-image: radial-gradient(形状 at x y, 颜色, 颜色); /* x和y是圆心的x和y */
background-image: radial-gradient(范围 形状 at x y, 颜色, 颜色); /* 大小用几个关键字表示 */
/* 
    最近的边作为大小：closest-side
    最近的角：closest-corner
    最远的边：farthest-side
    最远的角：farthest-corner
*/
background-image: repeating-radial-gradient(颜色 百分比, 颜色 百分比); /* 默认圆心为div中心，默认形状为椭圆 */

 例、

<style>
    .box{
        width: 500px;
        height: 200px;
        border: 3px solid #000;

        /* 径向渐变：默认渐变形状是椭圆 */
        /* background-image: radial-gradient(red, blue); */

        /* 设置形状：circle */
        /* background-image: radial-gradient(circle, red, blue); */

        /* 渐变范围 */
        /*
        4个关键字：
            closest-side - 最近的边
            closest-corner - 最近的角
            farthest-side - 最远的边
            farthest-corner - 最远的角
        */
        /* background-image: radial-gradient(circle closest-corner at 10% center, red, blue); */

        /*
        圆心的的设置：
            at 圆心的x 圆心的y
                x和y可以是具体的像素值，也可以是百分比，也可以是关键字
        */

        background-image:repeating-radial-gradient(red 10%, blue 20%);
    }
</style>
<div class="box"></div>