前言

昨天知道一些背景的屬性後，是不是覺得有點單調呀，所以我們今天就來談談漸層

基本語法

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

一、不設定漸層方向屬性(direction)

預設的方向為由上到下

二、透過角度設定漸層方向

90deg = bottom
-90deg = top

test{
    background:linear-gradient(-90deg,#e47184, #f6edb2);
}

三、透過百分比設定漸層的效果

--> 20% 的效果

程式碼:

test{
    background:linear-gradient(-90deg,#e47184 20%, #f6edb2);
}

--> 60% 的效果

程式碼:

test{
    background:linear-gradient(-90deg,#e47184 20%, #f6edb2);
}

結合昨天所提到的背景圖片，做出一個簡單的小應用

test{
    background: linear-gradient(115deg, #7bf 30%,transparent 50%) ,url("https://picsum.photos/600/200?random3");
}

當設定為50% 50%的時候又是另一種不同的感覺，大家可以自己去修改玩玩看呦!
那今天的鐵人賽就到這邊，我們鐵人賽Day11見囉~