linear-gradient()和radial-gradient()不是颜色，而是返回<image>类型的图像生成函数，仅适用于background-image等接受图像的属性，不能用于color、border-color等需颜色值的属性。
CSS 渐变不是颜色表示方式，而是图像生成函数，它返回的是 gradient 类型的 <image> 值，不能直接用于 color 属性（比如 color、border-color、text-shadow 的颜色部分）。
为什么 linear-gradient() 和 radial-gradient() 不是“颜色”？
CSS 中真正的“颜色表示方式”是指能被 color、background-color、outline-color 等接受的值，例如：#ff0、rgb(255, 0, 0)、hsl(0, 100%, 50%)、transparent。而 linear-gradient() 和 radial-gradient() 属于 <image> 类型——和 url(...) 同类，只能用在接受图像的地方，最常见的是 background-image 或 list-style-image。
尝试这样写会失效：
button {
color: linear-gradient(red, blue); /* ❌ 无效：color 不接受 <image> */
border-color: radial-gradient(circle, #000, #fff); /* ❌ 同样无效 */
}但这样是合法的：
立即学习“前端免费学习笔记（深入）”；
button {
background-image: linear-gradient(to right, #3498db, #2ecc71); /* ✅ */
background-image: radial-gradient(circle at 20% 30%, yellow, transparent 70%); /* ✅ */
}线性渐变与径向渐变的参数差异直接影响“是否像颜色”
虽然两者都生成图像，但它们的参数结构暴露了本质区别：线性渐变靠方向驱动，径向渐变靠几何定义。这种差异决定了你能否“假装它是个颜色”（比如用单色+透明模拟淡入）：
-
linear-gradient(to bottom, white, transparent)常被误认为“白色渐变”，实际是顶部纯白、底部全透明的垂直图像——它没有“颜色值”，只有像素分布 -
radial-gradient(circle at center, red 0%, red 50%, transparent 50%)本质是中心实红、边缘硬切透明的圆形遮罩，不是“红色带模糊”这种颜色语义 - 两者都不支持 alpha 通道独立缩放或色相偏移——这是真颜色（如
hsla()）才有的能力
容易踩的坑：把渐变当颜色用导致的典型问题
开发者常因直觉误用，引发不可见但关键的渲染异常：
-
文字渐变必须绕道
background-clip: text+-webkit-text-fill-color: transparent，因为color属性根本不认渐变 -
伪元素渐变背景在高 DPI 屏幕上可能模糊——这不是颜色精度问题，而是图像插值行为，和
rgb()的整数精度无关 -
用渐变做边框（
border-image）时，尺寸单位必须显式指定，否则radial-gradient(circle, red, blue)会按默认尺寸拉伸失真，而rgb(255,0,0)没有这种尺寸概念 -
无法参与 CSS 颜色函数计算，比如不能写
color-mix(in srgb, linear-gradient(...) 50%, black)——语法直接报错
记住：当你需要“一个可计算、可叠加、可继承的颜色值”，就该选 rgb()、hsl() 或 color(display-p3 ...)；当你需要“一段带空间过渡的视觉纹理”，才轮到 linear-gradient() 或 radial-gradient()。混淆这两者，等于拿一张 PNG 当 hex 码用——看起来差不多，但底层完全不兼容。
