如何利用 CSS 渐变实现多样化背景效果
前言
总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果，通过调整渐变类型和设置，你可以轻松实现从简单到复杂的各种背景效果。
在日常开发中 有很多需要用到渐变的地方，这片文章来总结一下
来看MDN是如何说的
CSS 渐变由 [<gradient>] 数据类型表示，它是 [<image>] 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。
一共有三种类型的渐变
线性渐变:linear-gradient()创建
线性渐变 是最常见的一种渐变方式，它沿着指定的轴线从一种颜色过渡到另一种颜色。你可以控制渐变的方向、颜色停留点和渐变的角度，创造出各种效果，例如从左到右、从上到下或对角线方向的渐变。
* 渐变轴为 45 度，从蓝色渐变到红色 */linear-gradient(45deg, blue, red);* 渐变轴为 45 度，从蓝色渐变到透明*/
linear-gradient(45deg,blue,transparent)
linear-gradient(45deg,blue,rgba(0,0,0,0))/* 从右下到左上、从蓝色渐变到红色 */linear-gradient(to left top, blue, red);
/* 蓝色渐变到红色再渐变到黄色 */
linear-gradient(to left top, blue, red,yellow);/* 色标：从下到上，从蓝色开始渐变，到高度 40% 位置是绿色渐变开始，最后以红色结束 */linear-gradient(0deg, blue, green 40%, red);/* 色标：从下到上，从蓝色开始渐变，到高度 200px 位置是绿色渐变开始，最后以红色结束 */linear-gradient(0deg, blue, green 200px, red); /* 颜色提示：从左到右的渐变，由红色开始，沿着渐变长度到 10% 的位置，然后在剩余的 90% 长度中变成蓝色 */linear-gradient(.25turn, red, 10%, blue);/* 多位置色标：45% 倾斜的渐变，左下半部分为红色，右下半部分为蓝色，中间有一条硬线，在这里渐变由红色转变为蓝色 */linear-gradient(45deg, red 0 50%, blue 50% 100%);径向渐变:radial-gradient()创建
径向渐变 从一个中心点向外扩展，逐渐过渡到其他颜色。你可以设置渐变的形状、大小以及中心点的位置，来实现从中心向外的渐变效果，这种效果常用于创建深度感和立体感。
/* 在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%)
/*65% 300px: 这是渐变的尺寸和位置设置。65% 表示渐变的形状或大小，通常是相对于容器的宽度或高度的百分比。在这个例子中，它表示渐变的结束点距离渐变中心 65% 的位置。300px 指渐变的半径，即从中心点到渐变的边缘的距离。at right top: 这是渐变的起始位置。right top 表示渐变的中心点位于容器的右上角。 */radial-gradient(60% 100px at left top, red 0, blue, green 100%) 锥形渐变:conic-gradient()创建
没怎么使用过 本文不做展开
B站渐进色背景实现
<!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>.layout{width:100vw;min-height:100vh;background:linear-gradient(to bottom,transparent -100px, #fff 300px),linear-gradient(to right ,#D2EEF9,#FFD1DE);}</style></head><body><div class="layout"></div></body></html>
boss直聘渐变色
<!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>.layout{width:100vw;min-height:100vh;background:linear-gradient(to bottom,transparent, #fff 300px),radial-gradient(90% 300px at left top, #95E0DC, transparent),radial-gradient(65% 300px at right top, #D3CBFC, transparent);}</style></head><body><div class="layout"></div></body></html>
本文到此结束 更多作为自我学习 也希望对你有所帮助 会持续更新代码文章 点个赞吧