怎样使用 CSS 渐变实现多样化配景效果

媒介

总在寻常看到像如许的图片 配景是怎样实现的呢  配景效果的多样性和雅观性直接影响用户体验。CSS 渐变为计划师提供了一种强大且机动的方法来创建引人注目的配景。渐变是颜色之间平滑过渡的效果，通过调解渐变范例和设置，你可以轻松实现从简朴到复杂的各种配景效果。

在一样平常开发中 有许多必要用到渐变的地方，这片文章来总结一下
来看MDN是怎样说的
CSS 渐变由 [<gradient>] 数据范例表现，它是 [<image>] 的一种特别范例，由两种或多种颜色之间的渐变过渡构成。
一共有三种范例的渐变

线性渐变:linear-gradient()创建

线性渐变 是最常见的一种渐变方式，它沿着指定的轴线从一种颜色过渡到另一种颜色。你可以控制渐变的方向、颜色停顿点和渐变的角度，创造出各种效果，比方从左到右、从上到下或对角线方向的渐变。

1. * 渐变轴为 45 度，从蓝色渐变到红色 */
3. linear-gradient(45deg, blue, red);
5. * 渐变轴为 45 度，从蓝色渐变到透明*/
6. linear-gradient(45deg,blue,transparent)
7. linear-gradient(45deg,blue,rgba(0,0,0,0))
9. /* 从右下到左上、从蓝色渐变到红色 */
11. linear-gradient(to left top, blue, red);
12. /*  蓝色渐变到红色再渐变到黄色 */
13. linear-gradient(to left top, blue, red,yellow);
15. /* 色标：从下到上，从蓝色开始渐变，到高度 40% 位置是绿色渐变开始，最后以红色结束 */
17. linear-gradient(0deg, blue, green 40%, red);
19. /* 色标：从下到上，从蓝色开始渐变，到高度 200px 位置是绿色渐变开始，最后以红色结束 */
21. linear-gradient(0deg, blue, green 200px, red);  
23. /* 颜色提示：从左到右的渐变，由红色开始，沿着渐变长度到 10% 的位置，然后在剩余的 90% 长度中变成蓝色 */
25. linear-gradient(.25turn, red, 10%, blue);
27.   
29. /* 多位置色标：45% 倾斜的渐变，左下半部分为红色，右下半部分为蓝色，中间有一条硬线，在这里渐变由红色转变为蓝色 */
31. linear-gradient(45deg, red 0 50%, blue 50% 100%);

复制代码

径向渐变:radial-gradient()创建

径向渐变 从一个中央点向外扩展，渐渐过渡到其他颜色。你可以设置渐变的形状、巨细以及中央点的位置，来实现从中央向外的渐变效果，这种效果常用于创建深度感和立体感。

1. /* 在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色 */
2. radial-gradient(circle at center, red 0, blue, green 100%)
3. /*65% 300px: 这是渐变的尺寸和位置设置。
5. 65% 表示渐变的形状或大小，通常是相对于容器的宽度或高度的百分比。在这个例子中，它表示渐变的结束点距离渐变中心 65% 的位置。
7. 300px 指渐变的半径，即从中心点到渐变的边缘的距离。
9. at right top: 这是渐变的起始位置。right top 表示渐变的中心点位于容器的右上角。 */
11. radial-gradient(60% 100px at left top, red 0, blue, green 100%)

复制代码

锥形渐变:conic-gradient()创建

没怎么使用过 本文不做睁开
B站渐进色配景实现

1. <!DOCTYPE html>
3. <html lang="en">
5. <head>
7. <meta charset="UTF-8">
9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
11. <title>Document</title>
13. <style>
15. .layout{
17. width:100vw;
19. min-height:100vh;
21. background:
23. linear-gradient(to bottom,transparent -100px, #fff 300px),
25. linear-gradient(to right ,#D2EEF9,#FFD1DE)
27. ;
29. }
31. </style>
33. </head>
35. <body>
37. <div class="layout"></div>
39. </body>
41. </html>

复制代码

boss直聘渐变色

1. <!DOCTYPE html>
3. <html lang="en">
5. <head>
7. <meta charset="UTF-8">
9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
11. <title>Document</title>
13. <style>
15. .layout{
17. width:100vw;
19. min-height:100vh;
21. background:
23. linear-gradient(to bottom,transparent, #fff 300px),
25. radial-gradient(90% 300px at left top, #95E0DC, transparent),
27. radial-gradient(65% 300px at right top, #D3CBFC, transparent)
29. ;
31. }
33.   
35. </style>
37. </head>
39. <body>
41. <div class="layout"></div>
43. </body>
45. </html>

复制代码

本文到此竣事  更多作为自我学习 也盼望对你有所资助 会连续更新代码文章 点个赞吧