大家好，欢迎来到IT知识分享网。
一、渐变的概念
渐变就是多种颜色平缓变化的一种显示效果
渐变的主要因素是色标。色标是一种颜色及其出现位置的组合。一个渐变是由多个色标组成（至少两个）。
渐变种类：线性渐变、径向渐变、重复渐变
1、线性渐变
3、重复渐变
将线性渐变或径向渐变，重复几次实现渐变填充
二、线性渐变
1、基础线性渐变：需要设置两个或两个以上的颜色，颜色之间使用“,”分隔，颜色会平均分配，根据设置颜色的顺序进行渐变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{
width: 300px; height: 300px; background: linear-gradient(red, black); } </style> </head> <body> <div class="box"></div> </body> </html> 2、进阶线性渐变
我们可以通过进阶线性渐变来更加细粒度的控制渐变，格式如下
background: linear-gradient(color1 percent/pixel,color2 percent/pixel); 先修改background属性如下
background: linear-gradient(red 70%, black 100%) 接下来把background设置成如下值
background: linear-gradient(red 70%, black 70%); 对上述的参数进行下解释
color1：起点色标值
degree1：从0%到degree1的部分都用color1填充，取值可以是百分比或具体的像素值
color2：结束色标值
degree2：从degree2到100%的部分都用color2填充，跟color1没有有重叠的部分进行渐变，也就是degree1到degree2部分进行渐变，取值可以是百分比或具体的像素值
例如：background: linear-gradient(red 70%, black 100%);表示从070%是红色，从100%开始是黑色，从70%100%是红到黑的渐变色
3、设置渐变方向
另外还可以设置线性渐变方向，默认从上到下，设置参数在起点颜色前面传递参数
background: line-gradient(to left top, red 150px, black 300px); 上述的css属性会设置一个从右下角到左上角的线性渐变，颜色从红到黑0150px是纯红色，150px300px是红色到黑色的渐变色，从300px到最后是纯黑色
也可以通过第一个参数设置角度，同样可以实现渐变方向，顺时针为正数，逆时针为负数
background: line-gradient(45deg, red 150px, black 300px); background: linear-gradient(color1 percent/pixel,color2 percent/pixel,color3 percent/pixel,...); 通过设置线性渐变可以实现一些特殊的效果，比如信封的边框效果
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{
width: 500px; height: 500px; border: 10px solid transparent; background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient( -45deg, red 0, red 10px, transparent 10px, transparent 20px, blue 20px, blue 30px, transparent 30px, transparent 40px); } </style> </head> <body> <div class="box"> </div> </body> </html> 径向渐变-由他们的中心定义，同样是修改background-image属性，只不过值为rradial-gradient()命令。
radial-grident()命令的语法格式如下：radial-gradient([半径长 at 圆心位置], 色标1, 色标2, …)。
基础径向渐变：需设置两个及两个以上的颜色，颜色之间用”,”间隔，颜色会平均分配，根据设置颜色的顺序，进行渐变
下面通过例子来了解一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{
width: 300px; height: 300px; background-image: radial-gradient(red, black); } </style> </head> <body> <div class="box"> </div> </body> </html> 我们可以看到默认是以元素的中心点为圆心，元素宽的一半为半径
接下来我们调整一下参数来看看显示效果有什么变化
调整圆心点
background-image: radial-gradient(150px at top left, red, black); closest-side:半径长度为从圆心到离圆心最近的边
farthest-size:半径长度为从圆心到离圆心最远的边
closest-corner:半径长度为从圆心到离圆心最近的角
farthest-corner:半径长度为从圆心到离圆心最远的角
我们可以通过例子加深一下印象
background-image: radial-gradient(closest-side at 60% 30%, red, black); background-image: radial-gradient(400px at top left, blue 0%, yellow 50%, red 100%); 这种功能的使用场景我个人感觉实际使用的地方比较少，大家有个认识，后续如果有需要的时候再回来查看。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/140766.html
