5、渐变

最后更新于:2022-04-02 06:08:04

  渐变是由两种或多种颜色之间的渐进过渡组成,它是一种特殊的图像类型,分为线性渐变和径向渐变,这两类渐变还会细分为单次和重复两种。渐变图像与传统图像相比,它的优势包括占用更少的字节,避免额外的服务器请求,调试成本更低等。在平时,发挥自己的想象,利用渐变可以创造出许多奇妙的视觉特效。 ## 一、线性渐变   线性渐变会使用linear-gradient()函数,可沿着一条梯度线(gradient line),从某一边或某个角度绘制渐变背景,该背景的默认方向是从元素顶部到底部,如下图所示。 ~~~css div { background: linear-gradient(#FC0, #F60); } ~~~ :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/9e/a2/9ea28f09092c8acf5c24db4db14c4b6a_404x206.png) **1)梯度线**   梯度线会穿过元素的中心点,沿顺时针旋转,如下图所示,旋转了50°。梯度线的起点是元素最近的顶点和梯度线的垂线的交叉点,终点是元素最远的顶点和梯度线的垂线的交叉点,注意,垂线和梯度线都要在同一象限内。象限是指平面直角坐标系中的横轴和纵轴所划分的四个区域。 :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/72/b6/72b6617a06e43409ecd076f783d32f2f_809x605.png)   图中的0%和100%分别表示第一个和最后一个色标的位置,百分数参照的是梯度线的长度。注意,梯度线上的各点颜色会沿着垂直线向外延伸,如下图所示。 :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/a5/6a/a56a8407a4d726a092e267e7d5176448_724x575.png) **2)方向**   梯度线的方向可以结合关键字to向四条边(top、bottom、left和right)延伸,默认是to bottom。下面的样式会修改成向右渐变,效果如下图所示。 ~~~css div { background: linear-gradient(to right, #FC0, #F60); } ~~~ :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/06/6e/066ed774d25cf3cc24a323ff2782c4ea_406x206.png)   将四条边的关键字两两组合,再与to配合使用,可声明成某个角度,例如top right表示右上象限。注意,不是右上角,也就是说,梯度线并不会穿过元素两个对角的顶点。如下图所示,to top right的梯度线是带箭头的实线而不是那条虚线。 :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/4e/54/4e540dcdf904599dc2b35289173e8975_757x523.png)   除了使用关键字之外,还能通过deg单位指定角度,这样能更直观的改变梯度线的方向,例如30deg,如下代码所示,在声明时不需要关键字to。 ~~~css div { background: linear-gradient(30deg, #FC0, #F60); } ~~~ **3)色标**   在指定方向后,就会跟一组用逗号隔开的色标,即标明颜色发生变化的位置。例如将#FC0放在梯度线20%的位置处,如下所示。 ~~~css div { background: linear-gradient(30deg, #FC0 20%, #F60); } ~~~   如果将两个色标放在同一位置,那么就能产生急变的效果(常用于实现条纹),如下代码所示。在下图中,左边是渐变图像,右边是急变图像。 ~~~css div { background: linear-gradient(30deg, #FC0 20%, #F60 20%); } ~~~ :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/41/4e/414e314d9a1c3ed8abf5d0c80641ff41_848x206.png)   当渐变尺寸明确设为0时,也能实现急变效果,样式如下。 ~~~css div { background: linear-gradient(30deg, #FC0 20%, #F60 0); } ~~~ **4)中色点**   中色点的作用是修改两侧的混合模式,即定义相邻颜色之间的渐变如何进行。默认情况下,中色点位于两个颜色终止位置之间的中点。   以下面的样式为例,由20%处的黄色(#FC0)过渡到100%处的橙色(#F60),二者的中点位置是60%。 ~~~css div { background: linear-gradient(30deg, #FC0 20%, #F60); } ~~~   当指定中色点时,需要省略颜色,如下代码所示,将中色点移到40%处,渐变效果如下图的右侧所示,左侧是默认的渐变。 ~~~css div { background: linear-gradient(30deg, #FC0 20%, 40% ,#F60); } ~~~ :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/7a/5d/7a5d210c60260a16d62ca3ad57790441_848x206.png) ## 二、径向渐变   径向渐变会从一个原点向外辐射,覆盖的范围既可以是圆形也可以是椭圆,常用于聚光灯、水面波纹等效果。在实现径向渐变时,会使用radial-gradient()函数,在函数中可声明形状、尺寸、中心点、色标等参数。 **1)形状和尺寸**   可通过circle或ellipse两个关键字,显式地声明渐变形状,如下所示。 ~~~css .circle { background: radial-gradient(circle, #FC0, #F60); } .ellipse { background: radial-gradient(ellipse, #FC0, #F60); } ~~~   在下面的两个样式中,当声明一个半径时,可生成圆形渐变,效果如下图的左侧;当声明两个不同的半径时,可生成椭圆渐变,效果如下图的右侧。 ~~~css .circle { background: radial-gradient(20px, #FC0, #F60); } .ellipse { background: radial-gradient(50px 20px, #FC0, #F60); } ~~~ :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/fa/13/fa13b77c3e570aeba9d05e8e84d8103c_846x206.png)   注意,圆形的半径不能设为百分数,而椭圆则可以。椭圆的第一个百分数半径参照横轴(背景图像的宽度),第二个参照纵轴(背景图像的高度),如下所示。 ~~~css div { background: radial-gradient(25% 20%, #FC0, #F60); } ~~~   除了通过长度和百分数的方式来指定渐变尺寸之外,还支持四个关键字,如下表所示,其中farthest-corner是径向渐变的默认值。 :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/41/dc/41dc19225883dce7fe8ec541f1183b51_1729x374.png)   在下图中,将四个关键字分别应用于圆形和椭圆,为了便于观察,改变了中心点的坐标。 :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/ba/68/ba68806f761080cc5f385b4dc565b621_1731x510.png) **2)中心点**   渐变区域的中心点可以设为background-position属性的位置值,例如top right、30px 50px等,但为了区别渐变的尺寸值,需要用at分隔,如下所示。 ~~~css div { background: radial-gradient(circle at 30px 50px, #FC0, #F60); } ~~~ **3)梯度射线**   与线性渐变不同,径向渐变的梯度射线(gradient ray)会从中心点向外延伸出无数条线,如下图所示。当渐变是圆形时,梯度射线的终点与中心点的距离就是圆的半径;当渐变是椭圆时,梯度射线的终点与中心点的距离由椭圆的横轴决定。 :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/12/7a/127a884582207a68711decc59fd91457_1128x532.png) ## 三、重复渐变   线性渐变和径向渐变都有对应的重复函数,前者是repeating-linear-gradient(),后者是repeating-radial-gradient(),重复次数由background-size属性和元素尺寸决定。在下图中,包含两组渐变(样式如下),其中每组的左侧是渐变一次的效果,右侧是重复渐变的效果。 ~~~css .linear { background: linear-gradient(30deg, #FC0, #F60 30px); } .repeating-linear { background: repeating-linear-gradient(30deg, #FC0, #F60 30px); } .radial { background: radial-gradient(30px, #FC0, #F60); } .repeating-radial { background: repeating-radial-gradient(30px, #FC0, #F60); } ~~~ :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/85/ee/85ee18db2229f20949d01d9a19d18ced_847x448.png =600x)   重复渐变有许多巧妙的用法,例如生成条纹背景,样式如下,效果如下图所示。 ~~~css .stripe { background: repeating-linear-gradient(30deg, transparent, transparent 10px, #F60 0, #F60 20px); } ~~~ :-: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/dd/5d/dd5db1884ecf56310a2dff1dc53a6686_412x206.png) ***** > 原文出处: [博客园-CSS躬行记](https://www.cnblogs.com/strick/category/1667864.html) [知乎专栏-CSS躬行记](https://zhuanlan.zhihu.com/pwcss) 已建立一个微信前端交流群,如要进群,请先加微信号freedom20180706或扫描下面的二维码,请求中需注明“看云加群”,在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily),欢迎浏览。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200)
';