linear-gradient()的用法

linear-gradient() 函數用於創建一個線性漸變的 "圖像"

它的語法是

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

direction

　　用角度值指定漸變的方向

　　　　方向值：常用的是to top，to bottom，to left，to right,to right top等等

　　　　角度值：常用的是0deg、180deg等等

color-stop1

　　color

　　　　使用關鍵字red、rgba等顏色值（透明也可以設置）

　　stop

　　　　是這個顏色塊終止位置，換句話說就是這塊顏色占的區域

　　ps：顏色值至少兩個

 

角度值

　　　先來看看文檔的圖畫

　　　　　

 

　　　　0deg不是按我們數學的角度向右定義的，默認方向是向上的，是從方向北開始的，所以北才是0deg，

　　　　

　　.back{
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background: linear-gradient(90deg,#02a0ff,red);
    }

 

 

 

　　　　當為90deg時，漸變線的方向相當於to right，從左指向右

　　　　　　

 

 

 

 

　　　　當為135deg時，漸變線的方向相當於to right bottom，從左上指向右下，相反為-135時，就從右上指向左下

　　　　　　

 

 

 顏色-終止位置

　　該值由一個<color>值組成，后跟一個可選的停止位置

 

 

 　　

　　以上兩種情形是顏色漸變，占的區域非常均勻，相當於background: linear-gradient(-135deg,#02a0ff 0%,red 100%)，都是從0-100%的比例結束的

　　 所以這個區域是可以修改的

　　　　　　

 

 

 　　如上圖，修改了參數

background: linear-gradient(180deg,#02a0ff 20%,red 80%);

　　20%相當於第一個顏色的區域，第一個白色箭頭就是顏色1與顏色2初始漸變，最后一個白色箭頭就表示完成漸變

　　我們會發現，頂部的20%和底部的20%並沒有漸變，所以我們可以理解顏色1的20%為開始位置，顏色2的80%為結束位置。

　　

　　我們將顏色1的值改成大於后面顏色的值，得到以下結果

background: linear-gradient(180deg,#02a0ff 60%,red 20%);

 

　　　　　　

 

 　　顏色1和顏色2直接就沒有產生陰影了，所以陰影產生是在區間里面的

　　

做一個三角形覆蓋圖片

　　

.box{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

    .box img{
        display: block;
    }

    .back{
        width: 330px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        background: linear-gradient(135deg,transparent 50%,red 50%);
    }

　　<div class="box">
        <div class="back"></div>
        <img src="./img/dflmg.jpg">
    </div>

先記錄到這里。