在我们的开发中，经常有各种规格、颜色、角度的白色图案需要实现。
有一次，我第一个想法是用无序列表来添加元素，然后控制不同的颜色，这样再改就太麻烦了，而且根本不够DRY，线性渐变的方法就是简单得多。
单杠
简单线性渐变的实现：
background: liner-gradient(#fb3, #58a);
将两个色标靠近：
background: liner-gradient(#fb3 20%, #58a 80%);
可以看到，底部20%区域和顶部20%区域都是纯色。 如果继续缩小这个距离，可以看到中间的渐变越来越窄，直到两个颜色值占到50%，也就是重叠了，就看不到中间的渐变效果了。
如果多个颜色停止点位置相同，则会形成无限小的过渡区域，过渡的起始颜色和结束颜色分别为第一个和最后一个指定值。 从疗效的角度来看，这里的颜色会突然变化，而不是一个平滑的渐变过程。
- CSS 图像（第三版）
渐变是代码生成的图像，因此可以像背景图像一样使用它们：
background: liner-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
不等宽的单杠可以用同样的方式实现：
background: liner-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
如果某个色标的位置值小于整个列表中它之前的色标的位置值css3 背景色，则该色标的位置值将被设置为所有色标的位置值中的最大值它上面。
- CSS 图像（第三版）
从规范中我们可以看出，我们只需要将前面的值设置为0，它肯定会比上面的值小css3 背景色，这样就可以通过浏览器手动调整为上面色标的值了。
如果你想实现两种以上的白色，也可以实现同样的效果：
background: liner-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;
垂直下摆
水平条是默认方向（tobottom是渐变的默认值），我们也可以修改渐变的方向来实现垂直白色：
background: liner-gradient(to right, #fb3 50%, #58a 0); /* 或用 90deg */
background-size: 30px 100%;
您需要记住更改背景大小值的位置。
对角线白色
实现了以上两种纯色之后，你会想到改变渐变方向和background-size的值也能得到斜白：
background: liner-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;
我们也看到了实际的疗效。 它不起作用的原因是渐变的方向在每个补丁内改变，而不是一起改变整个背景的方向。 可以使用background-repeat:no-repeat来查看疗效。
为此，我们需要在每个贴片中使用四个白条来实现每个贴片的无缝拼接，而两个白条根本无法达到这种效果：
background: liner-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
这样就可以实现斜白，而且这个白会比上面的横竖白看起来更薄。 这也需要通过毕达哥拉斯定律来估计，我们才能得到我们想要的长度。 当前的长度是15/√2px，这个尺寸大约是10.6，而我们想要的是15，所以我们需要重新估计一下patch的周长，patch底边的宽度是60（4个长度*15） ），所以周长为60/√2，这个值大致等于42.4，我们将其四舍五入写为42px。 由于√2不是整数，所以无论写多少，它都是一个近似值。
更好的对角白色
后来实现的斜折边非常不灵活，而且每次都需要估算贴片的周长，甚至不是45°，而是60°或30°，所以结果很难控制。
可以有更好的方法来实现这一目标。 liner-gradient()和radial-gradient()还有循环的写法：repeating-liner-gradient()和repeating-radial-gradient()。 这些书写方法与后者的唯一区别在于，色阶无限循环地重复，直到填满整个背景。
background: repeating-liner-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
这样我们就可以得到同样的效果，但是不需要宽度估计，而且代码更少，改动也更少。 而这还不是最大的用处，最大的用处是角度修改，我们可以随意修改角度，比如60°斜白：
background: repeating-liner-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
就像改变角度一样简单。 处理45°条纹时，还可以将这些技术与上述方法结合起来：
background: repeating-liner-gradient(45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%);
background-size: 42px 42px;
这样，我们改变的只是补丁的周长。
灵活的同色系白色
大多数情况下，需要得到的白色图案都是同一色系的，并不是相差很大的那种，而是色阶上有细微的差别。
background: repeating-liner-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);
如您所见，白色由主色 (#58a) 及其黑色变体组成。 这样，当颜色发生变化时，我们就需要到处改变。
我们可以改变一下实现方案，不再单独为每种白色设置颜色，而是直接将主色设置为背景色，同时叠加半透明的黑白，得到黑色的横条。
background: #58a;
background: repeating-liner-gradient(30deg, hsla(0,0%,100%,0.1), hsla(0,0%,100%,0.1) 15px, transparent 0, transparent 30px);
可以看到，效果和上图是一样的，但是在改动方面，我们只需要修改一处背景颜色即可。
湖北大华科技有限公司-软研-智慧城市产品开发部急聘中间后端！ ！ ！ ！ ！ 欢迎您来聊天。 如果您有兴趣，可以将您的简历发送至chen_zhen@dahuatech.com。 加入我们，我们可以一起进步，一起相聚，一起旅行。 让我们从世界村的男伴变成大化村的男伴吧。
翻译”：[{“文本”：”
【常见的CSS识字梯度效果】24种CSS梯度功效的集合（附源码）。n
n
【写上文】在网页开发的过程中，页面背景色想要一个渐变效果是好的，很多时候网上找官网那个丑陋的颜色系统，尤其是一些按钮和一些大的背景色，不能很黄，明天我就用工具人列出我在工作过程中总结的一些漂亮的渐变效果， 和实施方法。n涉及的知识点：CSS 好看渐变示例、CSS 垂直渐变、CSS
径向渐变、CSS 实现渐变、好看渐变
背景色，各种好看的渐变功效图;
n
【皇帝榜】支持博主的可以看看帝王榜，等你来选！
n
目录 2.2 径向梯度 3、CSS3 梯度完整示例
n
功效预览
n
n
版权声明：原创自CSDN博主-甘蔗盲学小码，如有疑问可去留言！
n
1. 什么是 CSS3 渐变
？n
首先，渐变的字面意思是逐渐变化，我们经常用于背景颜色的设置。官方单词是两种或多种颜色之间的平滑过渡。
n
它的优点是有些背景色想要好效果的时候不需要自己制作PS图片，然后设置背景图片什么的，我们可以直接通过CSS3渐变的样式属性来设置，减少页面资源恳求，可以随便调整色系，岂不是很开心！
n2
、CSS3梯度型 2.1 线性梯度（linear-gradient） 2.1.1 原理说明
n
线性，意味着渐变颜色可以在不同的方向上使用，以实现颜色的不同显示效果，并支持上/下/左/右/对角线等方向。其中，颜色可以通过多种方式添加，方便的手段是我用了两种;
n
默认属性（从上到下）：背景图像：线性渐变（#e66465，#9198e5）;
n
设置方向（从左到右）：背景图像：线性渐变（向右，#e66465，#9198e5）;
n
对角线（从左上到右下）：背景图像：线性渐变（右下角，#e66465，#9198e5）;
n
设置角度（从左到右）：背景图像：线性渐变（45度，#e66465，#9198e5）;
n
好看的线性渐变效果：
n
n
2.1.2 实现代码
n
可能有很多疗效，我特意买了一个给大家申请，具体实现代码风格如下：
n
X1：规格
n
background: linear-gradient(#e66465, #9198e5);
n
X2：样式
n
background: linear-gradient(to right, #9fe1fa, #f4edc9);
n
X3：样式
n
background: linear-gradient(to top right, rgb(238, 163, 175), rgb(149, 214, 240));
n
X4：样式
n
background: linear-gradient(111.4deg, rgb(238, 113, 113) 1%, rgb(246, 215, 148) 58%);
n
X5：样式
n
background: linear-gradient(102.7deg, rgb(253, 218, 255) 8.2%, rgb(223, 173, 252) 19.6%, rgb(173, 205, 252) 36.8%, rgb(173, 252, 244) 73.2%, rgb(202, 248, 208) 90.9%)
n
X6：样式
n
background: linear-gradient(58.2deg, rgba(40, 91, 212, 0.73) -3%, rgba(171, 53, 163, 0.45) 49.3%, rgba(255, 204, 112, 0.37) 97.7%)
n
X7：样式
n
background-image: linear-gradient(181.2deg, rgb(181, 239, 249) 10.5%, rgb(254, 254, 254) 86.8%);
n
X8：样式
n
background-image: linear-gradient(107.7deg, rgb(101, 168, 143) -30.7%, rgb(144, 220, 193) 7.2%, rgb(225, 203, 150) 31.3%, rgb(251, 166, 150) 82.6%, rgb(250, 54, 65) 128.5%);
n
X9：样式
n
background-image: linear-gradient(111.4deg, rgb(209, 231, 235) 7.4%, rgb(238, 219, 199) 51.4%, rgb(255, 159, 122) 82.6%, rgb(255, 109, 58) 100.2%);
n
X10：样式
n
background-image: linear-gradient(109.6deg, rgb(101, 58, 150) 29.9%, rgb(168, 141, 194) 99.9%);
n
X11：样式
n
background-image: linear-gradient(106.5deg, rgba(255, 215, 185, 0.91) 23%, rgba(223, 159, 247, 0.8) 93%);
n
X12：样式
n
background-image: linear-gradient(109.6deg, rgb(0, 51, 102) 11.2%, rgb(187, 187, 187) 91.1%);
n
X13：样式
n
background-image: linear-gradient(103.3deg, rgb(252, 225, 208) 30%, rgb(255, 173, 214) 55.7%, rgb(162, 186, 245) 81.8%);
n
X14：样式
n
background-image: linear-gradient(110.6deg, rgb(179, 157, 219) 7%, rgb(150, 159, 222) 47.7%, rgb(24, 255, 255) 100.6%);
n
2.2 径向梯度（径向梯度） 2.2.1 什么是径向梯度？
n
CSS径向渐变就像一个盒子，可以在某个中心设置一个渐变颜色，向外发散，或者在其他形状中设置渐变颜色，也可以理解为背景色辐射
n
其属性设置可以指定渐变的中心、形状（正方形或椭圆形）、大小。一般情况下，渐变的中心为中心-[表示中心点]，渐变的形状为椭圆-[表示椭圆]，渐变的大小为最远的角[表示最远的角]。
n
2.2.2 CSS句型
n
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
n
该参数表示默认值
n
形状
n
定义形状（正方形或椭圆）。
n椭圆
（椭圆形） 注意：容器的宽度和高度不相等
n
大小
n
定义大小
n最远的角落
（到最远的角落）。
n
位置
n
定义圆心的位置
n居中
（在中心点表示
）.n
起始颜色
n
定义开始的颜色值
n
必需，无默认值
n
。
n
您可以在两者之间定义多种过渡颜色
n
不需要，请参阅配色要求
n
最后颜色
n
定义结束颜色值
n
必需，无默认值
n
2.2.3 径向梯度的常见例子
n
虽然配色取决于个人喜好，但主要应用方法包括以下几种：
n
像素位置设置：背景：径向渐变 （978pxat 1.8% 4%， RGB （162，208，254） 0.1%， RGBA （193， 94，245， 0.73） 100.2%）
n
形状位置设置：背景：径向渐变（圆圈 10% 20%，RGB （239，246，249） 0%，RGB （206，239，253） 90%）
n
具体实现如下：
n
n
J1.风格
n
背景：径向渐变（178pxat1.8%4%，RGB（162，208，254）0.1%渐变颜色css3，RGBA（193，94，245，0.73）100.2%）
n
J2.风格
n
background: radial-gradient(128px at 31.7% 40.2%, rgb(225, 200, 239) 21.4%, rgb(163, 225, 233) 57.1%)
n
J3.风格
n
background: radial-gradient(169px at -2.9% 12.9%, rgb(247, 234, 163) 0%, rgba(236, 180, 238, 0.56) 46.4%, rgb(163, 203, 247) 100.7%)
n
J4.风格
n
background: radial-gradient(circle at 10% 20%, rgb(239, 246, 249) 0%, rgb(206, 239, 253) 90%)
n
J5.风格
n
background: radial-gradient(circle at 32.2% 83.5%, rgb(239, 167, 167) 0%, rgb(215, 123, 191) 90%)
n
J6.风格
n
background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, rgb(8, 70, 218) 90%);
n
J7.风格
n
background-image: radial-gradient(circle at 10.6% 23.3%, rgb(186, 162, 252) 0%, rgb(176, 248, 242) 72.4%);
n
J8.风格
n
background-image: radial-gradient(circle at 10% 20%, rgb(249, 57, 170) 9.8%, rgb(134, 176, 255) 94.9%);
n
J9.风格
n
background-image: radial-gradient(circle at 48.7% 44.3%, rgb(30, 144, 231) 0%, rgb(56, 113, 209) 22.9%, rgb(38, 76, 140) 76.7%, rgb(31, 63, 116) 100.2%);
n
J10.风格
n
background-image: radial-gradient(circle at 10% 20%, rgb(222, 168, 248) 0%, rgb(168, 222, 248) 21.8%, rgb(189, 250, 205) 35.6%, rgb(243, 250, 189) 52.9%, rgb(250, 227, 189) 66.8%, rgb(248, 172, 172) 90%, rgb(254, 211, 252) 99.7%);
n
版权声明：原创自CSDN博主-甘蔗盲学小码，如有疑问可去留言！
n
3. CSS3梯度完整示例 3.1 百度云盘
n
链接：
n
提取代码：hdd6
n
3.2123网盘
n
链接：
n
提取代码：hdd6
n
3.3 结束复活节彩蛋
n
致力于打造杰作，愿你解开王者的迷茫，运气好的话，希望王者被选中登场，谢谢！
n
点击这里查看皇帝的账单
n
如果您有任何疑问，请随时留言，2023年，一起冲！！
n
点击进入>>>违规和滥用举报中心“，”to“：”en“，”sentLen“：{”srcSentLen“：[42，1，1，123，5，67，30，46渐变颜色css3，12，14，42，18，31，24，5，107，51，56，27，69，77，85，75，18，14，17，42，13，14，13，14，13，14，13，14，13，14，13，13，13，13，13，13，13，13，13，14，13，14，13，14，13，15，14，15，14，15，14，15，14，15，14，15，44，64，32，86，18，15，15，13，20，32，12，12，33，16，15，22，19，16，15，9，19，17，18，16，15，21，33，105，96，15，15，13，98，13，15，13，15，15，13，15，13，15，13，15，13，15，13，15，14，15，42，27，11，16，16，11，16，15，
38，16，34，25]，”transSentLen“：[115,0,1,424,5,237,117,79,24,14,155,33,108,69,5,333,95,190,95,94,104,113,98,44,14,33,145,26,14,17,14,17,14,17,14,17,14,17,14,17,14,17,14,17,15,18,15,18,15,18,15,18,15,18,15,78,205,95,249,34,15,45,13,46,77,12,23,49,16,56,49,19,43,34,11,60,57,18,38,34,49,119,135,124,50,15,17,98,17,15,17,15,17,15,17,15,17,15,17,15,17,15,17,15,18,15,155,62,13,29,27,13,29,30,163,41,93,65]}}]}]
