渐变：线性与径向
使用 linear-gradient() 和 radial-gradient() 创建平滑的颜色过渡。
渐变：线性与径向 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
什么是 CSS 渐变
CSS 渐变是生成的图像（不需要图像文件），可以在两种或更多颜色之间进行过渡。渐变可以作为 background-image 或 background 简写属性的值来指定。
linear-gradient() 基础
线性渐变沿直线方向实现颜色过渡。第一个参数设置方向，后面依次是颜色停止点。
<div class="gradient-demo"></div>
渐变方向：关键字和角度
方向可以使用关键字或角度值：
<div class="dir-keyword"></div>
<div class="dir-45deg"></div>
<div class="dir-135deg"></div>
多个颜色停止点
您可以根据需要添加任意数量的颜色停止点。每个停止点都可以选择指定位置（长度或百分比）。
<div class="stops"></div>
硬颜色停止点
将两个停止点设置在同一位置，可以创建硬停止点，使颜色突然变化而不进行混合。
<div class="hard-stop"></div>
重复线性渐变
repeating-linear-gradient() 会平铺渐变图案，从而创建条纹和纹理。
<div class="stripes"></div>
radial-gradient() 基础
径向渐变会从中心点向外辐射，形成椭圆形或圆形。
<div class="radial-demo"></div>
径向渐变的形状和大小
您可以控制渐变的形状（circle 或 ellipse）以及范围关键字：
<div class="radial-circle"></div>
<div class="radial-ellipse"></div>
径向渐变的位置
在形状和大小之后使用 at <position>，即可移动径向渐变的中心。
<div class="radial-position"></div>
圆锥渐变
conic-gradient() 会围绕中心点扫过各种颜色，效果类似饼图。它需要 from 起始角度，也可以选择指定 at 位置。
<div class="conic-demo"></div>
渐变透明度
在渐变停止点中使用 transparent 或 rgba()，即可让颜色从元素的背景色平滑地淡入或淡出。
<div class="fade-overlay"></div>
快速检查
哪个 CSS 函数会生成从中心点向外辐射的渐变？
回顾
线性渐变沿直线变化，径向渐变向外辐射，圆锥渐变围绕某个点扫过。使用硬停止点可以创建条纹。所有渐变函数都是 background-image 的值，无需外部文件即可生成图像。
常见问题解答
「渐变：线性与径向」课时是免费的吗？
是的 — 「渐变：线性与径向」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「渐变：线性与径向」这节课中我会学到什么？
使用 linear-gradient() 和 radial-gradient() 创建平滑的颜色过渡。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「渐变：线性与径向」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。