一： 一般渐变

  • 未设置角度，则默认为180deg（从上到下）
  • 设置了角度，则0deg为竖直向上，然后顺时针旋转

上图！
在这里插入图片描述

二： 块渐变

.aq1{
        background-image: linear-gradient(45deg,#87f 60%,#f78 60%);
    }
    .aq2{
        background-image: linear-gradient(90deg,#87f 60%,#f78 60%);
    }
    .aq3{
        background-image: linear-gradient(90deg,#87f 40%,#f78 60%);
    }
    .aq4{
        background-image: linear-gradient(110deg,#87f 33%,#f78 33%,#f78 66%,#d1d1d1 66%);
    }

注意aq124和aq3的区别，如果比例之间有空隙则会形成渐变来过渡，如果同一比例有两种颜色则不会形成渐变。
在这里插入图片描述

多块

代码:

    .aq5{
        width: 500px;
        height: 200px;
        background-image: linear-gradient(100deg,red 30%,transparent 30%),
        linear-gradient(60deg,yellow 25%,yellow 60%,transparent 60%),
        linear-gradient(150deg, transparent 20%,green 20%);
    }

效果
在这里插入图片描述
为了处理留白问题，所以设置了重叠部分，即后面的百分比小于前面的

测试demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    body,.one,.two,.three{
        display: flex;
        flex-wrap: wrap;
    }
    .a{
        width: 100%;
    }
    .a *{
        height: 100px;
        width: 10%;
    }
    .anull{
        background-image: linear-gradient(#78f, #f78);
    }
    .a0{
        background-image: linear-gradient(0deg,#78f, #f78);
    }
    .a45{
        background-image: linear-gradient(45deg,#78f, #f78);
    }
    .a90{
        background-image: linear-gradient(90deg,#78f, #f78);
    }
    .a180{
        background-image: linear-gradient(180deg,#78f, #f78);
    }
    .a270{
        background-image: linear-gradient(270deg,#78f, #f78);
    }
    .aq1{
        background-image: linear-gradient(45deg,#87f 60%,#f78 60%);
    }
    .aq2{
        background-image: linear-gradient(90deg,#87f 60%,#f78 60%);
    }
    .aq3{
        background-image: linear-gradient(90deg,#87f 40%,#f78 60%);
    }
    .aq4{
        background-image: linear-gradient(110deg,#87f 33%,#f78 33%,#f78 66%,#d1d1d1 66%);
    }
    #div3{
    background:linear-gradient(250deg,#a0a 30%,rgba(0,0,0,0) 30%),url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
    background-size:cover;
    /* background-position:top left; */
    } 
    </style>
</head>
<body>
    <div class="one a">
        不设置直角度<div class="anull"></div>
        0<div class="a0"></div>
        45<div class="a45"></div>
        90<div class="a90"></div>
        180<div class="a180"></div>
        270<div class="a270"></div>
    </div>
    <div class="two a">
        45<div class="aq1"></div>
        90<div class="aq2"></div>
        90<div class="aq3"></div>
        110<div class="aq4"></div>
    </div>
    <div class="three a">
        <div id="div3"></div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
注意最后一个例子一定要设置透明（不一定要一个比例的位置有两种颜色，可有空隙形成渐变，可见下图），因为至少要有两个颜色
在这里插入图片描述

补充2022.5.21

background-image: linear-gradient(to bottom, white 0%, red 50%, #000 100%);

在这里插入图片描述
0%处：纯白
50%处：纯红
100%处：纯黑

白红过渡
红黑过渡
白色0%
红色50%
黑色100%

设置颜色，其实是设置颜色点。下面这句和上面那句等效

background-image: linear-gradient(to bottom, /* rgb(86, 71, 117) */white, red, #000);

三个颜色点，则有两个均等的过度块，将100vh分为2个均等的过度块，则系统默认将颜色点的位置设为0%,50%,100%

# css3 # css # html
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

华为云数据仓库专业级开发者认证重磅发布

avatar 华为开发者空间
cover

KubeEdge 新版本5大特性解读：更完备的节点设备能力，全新的Dashboard体验

avatar 华为开发者空间
cover

一文带你搞懂GaussDB数据库性能调优

avatar 华为开发者空间