前言

昨天知道一些背景的属性後，是不是觉得有点单调呀，所以我们今天就来谈谈渐层

基本语法

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见罗~