CSS之linear-gradient(渐变、切角)

8,059 阅读4分钟

linear-gradient有什么用?

颜色渐变

最简单的例子:

.bgc{
    width: 200px;
    height: 45px;
    background: linear-gradient(blue, red)
}

截屏2021-08-09 下午3.28.55.png

从这个例子可以看出该属性最直接的效果是让容器渐变颜色。那么它接受的参数有什么呢?又有什么技巧呢?

linear-gradient接收的参数

linear-gradient([<angle> | to <side-or-corner>]? , <color-stop-list>)

一般来说,会写三个参数。第一个参数为角度(可以是deg,或者是方向的词如:top,left top等),这个参数决定了渐变的角度。默认是180deg。所以开头的例子实际上是background: linear-gradient(180deg,blue, red)。180度则表示从上往下颜色进行渐变,90度则为从左到右,0度从下至上,-90度从右至左。 关于角度具体是如何决定图片颜色的改变原理可以参考该文章,写得非常好。www.w3cplus.com/css3/do-you… 

第二、三个参数则是接收颜色,用来表示渐变的颜色。

如果渐变的颜色多怎么处理

上文说会写三个参数,不代表只能接受三个参数,上文中的传参实际上最后一个可以是多个,即可以传多个颜色。 如果上面的例子改写成background: linear-gradient(45deg,blue,red,green);截屏2021-08-09 下午3.43.38.png

如果想规定渐变长度怎么处理

其实我们上面实例代码中的颜色都是不完整的参数,实际上每个上面的每个颜色都是一个渐变色节点(Color stops)

渐变色节点(Color stops)

每个节点包含两个参数, 颜色 节点所在的位置。 如background: linear-gradient(90deg, blue 10px, red 40px, green 170px);

截屏2021-08-09 下午3.58.08.png

颜色节点所在的位置即为正色(如上例中 blue 10px 即蓝色在渐变线中的10px上 其余位置开始渐变)。 而默认状态下,如果不传位置值,则平分位置。

学到这里,灵光的小伙伴会有些切角的思路,让我们来一起看看如何运用linear-gradient切角吧。

切角

切角的思路其实很简单,将其中一个颜色变为透明即可 假设我需要一个矩形的右上角切一刀

截屏2021-08-09 下午4.34.08.png

.bgc{
    width:195px;
    height: 200px;
    background-color: #425df3;
    background: linear-gradient(-135deg, transparent 20px, #425df3 0);
}

主要是运用渐变颜色为透明,且最后一个颜色位置设置为0;

那么如果我们切右上跟右下角呢,添加一个linear-gradient(-45deg, transparent 20px, #425df3 0);就好了嘛

但是我们会发现

截屏2021-08-09 下午4.39.40.png

这是怎么回事呢 如果我们把两个 transparent 的位置调到100px可以看到

截屏2021-08-09 下午4.41.13.png

这是为什么呢? 因为渐变这个属性每写一次就会有一层渐变,即我们看到的实际上是两个渐变后效果叠加起来呈现出来的结果。 那么如何处理呢?

既然是叠加,那么我们缩小对应的地方不就行了,我们要切右上右下,则使用background-size属性保持长度不变,高度为一半,并且给两个渐变分别设置对应位置 。

.bgc{
    width:195px;
    height: 200px;
    background-color: #425df3;
    background: 
    linear-gradient(-135deg, transparent 100px, #425df3 0) top, 
    linear-gradient(-45deg, transparent 100px, #425df3 0) bottom;
    background-size: 100% 50%;
}
ps:background-size: 对应的比列根据你切的角位置来决定的,如果两个角是左右,则用background-size: 50% 100%;。且要记得在对应的linear-gradient后面设置所在位置。

但是我们会看到

截屏2021-08-09 下午4.50.16.png

这个图案跟我们上面的图案有点像了,好像是。。。出现了两次图片一样,是的!出现这个的原因是没有添加background-repeat属性,因而每层渐变图案各自平铺了两次。 所以我们更改代码 添加background-repeat: no-repeat; 并且将100px改为我们需要的20px

.bgc{
    width:195px;
    height: 200px;
    background-color: #425df3;
    background: 
    linear-gradient(-135deg, transparent 20px, #425df3 0) top, 
    linear-gradient(-45deg, transparent 20px, #425df3 0) bottom;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

截屏2021-08-09 下午4.53.37.png

大功告成!

那么四个角呢?会有其他坑吗?答案很不错,是不会。只需要更改渐变器的位置,以及size的比例即可

.bgc{
    width:195px;
    height: 200px;
    background-color: #425df3;
    background: 
    linear-gradient(-135deg, transparent 20px, #425df3 0) top right ,
    linear-gradient(-45deg, transparent 20px, #425df3 0) bottom right,
    linear-gradient(45deg, transparent 20px, #425df3 0) bottom left ,
    linear-gradient(135deg, transparent 20px, #425df3 0) top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

截屏2021-08-09 下午4.57.39.png

恭喜完成了切角的学习!

参考文章:

www.jianshu.com/p/cebec6e92…

www.w3cplus.com/css3/do-you…