linear-gradient边缘发灰或色带明显是因默认等距停靠点导致RGB空间插值不均匀，人眼对蓝红过渡敏感度低而显卡顿；需显式设置停靠点、缩小间距、添加中间色阶，或用HSL/LCH、噪点、PNG等方案优化。
linear-gradient 边缘发灰或色带明显是因为颜色停靠点太远
渐变边缘不自然，常见表现是过渡区域出现灰蒙蒙的“雾感”或一条条肉眼可见的色带（banding），根本原因不是 CSS 写错了，而是 linear-gradient 默认用等距停靠点（比如 rgb(255,0,0), rgb(0,255,0), rgb(0,0,255) 会被浏览器自动均分位置），中间色块跨度太大，RGB 空间本身又非感知均匀——人眼对绿色敏感、对蓝色迟钝，导致蓝→红过渡看起来“卡顿”。
- 停靠点必须显式声明，别依赖默认分布：写成
linear-gradient(to right, rgb(255,0,0) 0%, rgb(0,255,0) 50%, rgb(0,0,255) 100%) - 如果想柔化边缘，把相邻色停靠点拉近：比如
rgb(0,255,0) 48%, rgb(0,0,255) 52%，留出 4% 交叠区让浏览器插值更平滑 - 避免跨度过大的 RGB 跳变（如
rgb(0,0,0)→rgb(255,255,255)直接写死两端），中间至少加一个过渡灰阶色，比如rgb(64,64,64)
RGB 到 RGB 渐变在低色深屏幕（如大多数笔记本）上必然出现 banding
这不是你代码的问题，是硬件限制。多数 LCD 屏幕只有 6bit 或 6bit+FRC 面板，实际只能显示约 262k 色，而 24bit RGB 理论支持 1677 万色。浏览器即使输出了平滑渐变，硬件也无法渲染出中间所有过渡色。
- 可以加轻微噪点覆盖来视觉欺骗：用
background-image: linear-gradient(...), url("data:image/svg+xml,%3Csvg...%3E")叠一层极低透明度的noiseSVG - 更稳妥的做法是改用 HSL 或 LCH 空间定义颜色（需 JS 动态生成或 PostCSS 插件），它们比 RGB 更符合人眼感知，但纯 CSS 不支持 HSL/LCH 渐变停靠点（
hsl()函数可用，但插值仍是 RGB 底层） - 检查是否启用了 GPU 加速：某些 Chrome 版本在禁用
chrome://flags/#enable-gpu-rasterization时，渐变渲染质量会明显下降
使用 rgba() 扩展透明度时，alpha 通道会参与插值，容易导致意外变灰
很多人想做“从红到透明红”的效果，写成 linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0))，结果发现中间段发白或发灰。这是因为浏览器对 RGBA 插值是先分别插值 R/G/B/A 四个通道，再合成——当 A 从 1 降到 0，R/G/B 却还在“被稀释”，叠加在默认白色背景上就显灰。
- 正确做法是固定底色，用透明度只控制“覆盖强度”：给容器设
background-color: #ff0000，再叠一层linear-gradient(to right, transparent, black)并设background-blend-mode: multiply - 或者直接用两个层：伪元素 +
opacity动画模拟，比单层 RGBA 渐变更可控 - 若必须用 RGBA 渐变，请确保背景色明确（比如
body { background: #fff }），否则不同背景会呈现完全不同的中间色
实际最省事的解法，往往是放弃“纯 CSS 实现完美 RGB 渐变”的执念——该用 PNG 贴图就贴图，该用 Canvas 绘制就绘制。CSS 渐变适合示意和轻量交互，真要边缘丝滑、跨设备一致，它天生有局限。
立即学习“前端免费学习笔记（深入）”；
