CSS 渐变 (Gradient) 工作原理

CSS 渐变 (Gradients) 允许您在两个或多个指定颜色之间显示平滑的过渡。浏览器原生支持这些特性，因此无需使用图像文件，这不仅减少了下载时间，还能在缩放时保持无限清晰度。

颜色沿着一条直线（如从上到下，或 45度角）进行过渡。您可以控制角度和方向。

linear-gradient(90deg, red, blue)

颜色从一个中心点向外辐射扩散。您可以控制渐变的形状（圆形或椭圆）和中心位置。

radial-gradient(circle, red, blue)

常见使用场景

我可以添加多少种颜色？

理论上没有限制！您可以在 CSS 渐变中添加任意数量的颜色节点（Color Stops）。浏览器会按照您指定的顺序和位置渲染它们。

浏览器兼容性如何？

现代 CSS 渐变语法（不带私有前缀）已经被所有主流浏览器（Chrome, Firefox, Safari, Edge）完美支持。对于非常古老的浏览器（如 IE9），则不支持。

什么是颜色节点位置（Position）？

它定义了颜色在渐变轴上开始的位置。例如，如果红色设置在 0%，蓝色设置在 50%，则前 50% 区域是从红到蓝的过渡。您可以使用百分比或像素值。

可以使用透明度吗？

当然可以！在颜色选择中使用 RGBA 或 HSLA 格式即可实现透明渐变效果。这在制作遮罩层或叠加效果时非常有用。

生成的 CSS 代码可以在哪用？

您可以将其直接粘贴到 CSS 文件的 background 或 background-image 属性中，或者直接写在 HTML 元素的 style 属性里。

如何创建硬边缘（不平滑）的渐变？

将两个相邻颜色的位置设置为相同的值（例如：红色 50%，蓝色 50%），即可在两者之间产生一条清晰的分界线，而不是平滑过渡。

重复渐变 (Repeating Gradients) 是什么？

CSS 还有 repeating-linear-gradient 和 repeating-radial-gradient 函数，可以将定义的渐变模式无限重复填满整个容器，常用于制作条纹背景。

为什么我的渐变显示不出来？

请确保元素具有明确的高度和宽度。如果元素内容为空且没有设置高度，背景自然无法显示。另外检查 CSS 语法是否正确闭合。