linear-gradient() 函數(shù)用于創(chuàng)建一個線性漸變的 "圖像"
語法:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：用角度值指定漸變的方向

方向值：常用的是to top，to bottom，to left，to right,to right top等等
角度值：常用的是0deg，90deg，180deg等等

color-stop1：

color：
　使用關(guān)鍵字red、rgba，#ccc等顏色值（透明也可以設(shè)置）
stop：
　是這個顏色塊終止位置，換句話說就是這塊顏色占的區(qū)域

案列一：背景/文字

css:

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background: linear-gradient(to right top,  pink,yellow,lightgreen
    );
    }

    .box2 {
        width: 100px;
        height: 100px;
        background: linear-gradient(to bottom, pink,yellow,lightgreen, lightblue
        );
    }
    .box3 {
        width: 100px;
        height: 100px;
        background: linear-gradient(90deg, lightgreen
    , pink);
    }

    .box4 {
        width: 100px;
        height: 100px;
        background: linear-gradient(180deg, lightgreen 25%, yellow 75%,pink 100%
        );
    }

    .text {
        background: linear-gradient(180deg, red , blue 
        );
        -webkit-background-clip: text;
        color: transparent;

      /* background: background: linear-gradient(…) 為文本元素提供漸變背景。
         webkit-background-clip: text 用文本剪輯背景，用漸變背景作為顏色填充文本。 
         color: transparent 使用透明顏色填充文本。*/
    }
</style>

html

<span>box1:</span>
    <div class="box1">
    </div>

    <span>box2:</span>
    <div class="box2">
    </div>

    <span>box3:</span>
    <div class="box3">
    </div>

    <span>box4:</span>
    <div class="box4">
    </div>

    <span>text:</span>
    <h1 class="text">
        我是漸變的文字啊
    </h1>

效果圖：

image.png

案列二：邊框

css

.main {
        margin: 300px;
        width: 300px;
        height: 300px;
        border: 30px solid;
        border-image: -webkit-linear-gradient(top left,red 20%,blue 40%,green 60%,black 80%) 100 100 100 100;
    }

html：

<div class="main">
    </div>

效果圖：

image.png