在网页视觉设计中，背景渐变是最常用的装饰手段之一。CSS提供的linear-gradient与radial-gradient让开发者无需切图就能实现平滑的颜色过渡。这两种函数都属于CSS Images Module定义的图像值，可直接用于background或background-image属性。掌握它们的参数规则，能够显著提升样式开发效率并减少资源请求。
一、linear-gradient直线渐变
linear-gradient用来创建沿一条直线方向展开的颜色渐变。最基础的写法只需要列出若干颜色，浏览器会默认从上到下排列。例如background: linear-gradient(red, blue)会生成从红到蓝的垂直渐变。若要控制方向，可在颜色前加上角度或关键字，如to right表示从左向右，45deg表示沿四十五度角。
色标位置是linear-gradient的核心。每个颜色后面可以跟一个百分比或长度，用来指定该颜色在渐变线上的起点。如果不写，浏览器会自动平均分布。我们还可以在两个颜色之间插入同一个颜色来制造硬边，或者利用透明度色标实现淡入淡出。下面是一段带角度与多色标的示例代码：
.box {
/* 从左下到右上，红占前20%，中间黄，结尾透明蓝 */
background: linear-gradient(45deg,
#ff0000 0%,
#ff0000 20%,
#ffff00 50%,
rgba(0, 0, 255, 0) 100%);
}
上述代码中，红到黄的过渡集中在前半段，后半段黄色逐渐变为完全透明的蓝，形成自然消退效果。需要注意的是，旧版WebKit内核浏览器曾使用过带前缀的-webkit-linear-gradient，现在主流环境均已支持无前缀标准写法，但若有兼容老系统的需求，可把带前缀的写法放在前面作为回退。
1.1 方向参数的细节
角度值的计算规则是：0deg指向正上方，顺时针增加，90deg为向右。这与我们日常说的“顺时针旋转”一致，但初学者常误以为0deg是向左。使用关键字to bottom、to left等则更直观，它们最终也会被换算成对应角度。
当容器比例变化时，固定角度的渐变线长度会按公式计算，可能导致色标实际可见区域偏移。如果对渐变覆盖范围有严格设计要求，建议用百分比色标并配合background-size调整，而不是单纯依赖角度。
二、radial-gradient径向渐变
radial-gradient以某个点为圆心，沿半径方向向外扩散颜色。默认圆心位于容器中心，形状为椭圆并自适应容器尺寸。基本语法为radial-gradient(color1, color2)，也可显式声明形状、尺寸与位置，如circle closest-side at 30% 30%。
尺寸关键字包括closest-side、farthest-side、closest-corner和farthest-corner，它们决定渐变结束圆或椭圆触及容器的哪条边。比如closest-side会让渐变在碰到最近边时就停止，适合做聚光灯效果。以下代码展示了一个偏移圆心的蓝色光晕：
.light {
background: radial-gradient(circle closest-side at 70% 30%,
#ffffff 0%,
#66ccff 40%,
#003366 100%);
}
这里圆心放在右上区域，白色高光过渡到蓝再到底色深蓝，由于用了closest-side，渐变在到达最近容器边后不再延伸，外围直接使用末色填充。若改用farthest-corner，渐变会一直铺满到最远角，视觉扩张感更强。
2.1 椭圆与圆的选择
不写形状时，浏览器按容器宽高比生成椭圆；写circle则强制正圆。在响应式卡片中，椭圆往往更贴合矩形容器，而圆形更适合头像框或按钮高光。色标规则与linear-gradient一致，同样支持透明通道与硬边写法。
一个常见误区是认为radial-gradient只能做背景光斑。实际上把它叠加在linear-gradient之上，用逗号分隔多个背景层，可以模拟复杂材质，例如金属质感或天空云层。注意多层背景中先写的层在上方，因此透明渐变应放在顶层以免遮挡下层。
三、综合应用与回退方案
实际项目中常将两种渐变组合，或配合background-blend-mode产生混合。下面的例子用线性渐变模拟晨曦，再叠一层径向高光：
.card {
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.8), rgba(255,255,255,0) 60%),
linear-gradient(180deg, #ffd194 0%, #ff9a9e 100%);
}
对于不支持渐变的极旧浏览器，最稳妥的回退是先写一条纯色background: #ff9a9e;，随后用渐进增强方式覆盖渐变声明。这样即使解析失败，用户仍能看到接近的实色背景，不会影响内容可读性。
总结来说，linear-gradient与radial-gradient分别解决线性与放射状的色彩过渡需求。理清方向、色标与尺寸关键字后，大部分UI渐变都可纯CSS实现，既减负又灵活。建议在日常组件中多用变量管理渐变色值，便于主题切换与维护。
linear-gradientradial-gradientCSS_background修改时间：2026-08-03 13:51:33