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>

先記錄到這裏。