硬边缘不是渐变写错了，而是浏览器在rgb空间线性插值时人眼对明度/色相突变敏感所致；须显式声明色标位置、缩小过渡跨度、用hsl/oklch中间色替代rgb跳变，并确保渲染空间完整。
硬边缘不是渐变写错了，是浏览器在 RGB 空间做线性插值时，人眼对明度/色相突变过于敏感导致的视觉断裂；关键不是“加更多颜色”，而是控制停靠点位置、缩小过渡跨度、规避硬件色深限制。
显式声明色标位置，别依赖默认 0%–100% 均分
浏览器对 linear-gradient(to right, #000, #fff) 这类无位置声明的写法，会把两个颜色强行塞进 0% 和 100%，中间全靠等距插值——一旦起止色明度差大（如黑→白）或色相跨度过大（如蓝→红），RGB 插值必然经过人眼最易察觉的灰紫/灰绿区，形成“卡顿感”硬边。
- 必须写成
linear-gradient(to right, #000 0%, #333 30%, #ccc 70%, #fff 100%)，让过渡发生在可控区间 - 避免相邻色标间距超过 20%，比如
#333 30%, #ccc 70%中间留了 40% 空档，极易出 banding - 若想柔化某一段，可让两个色标重叠：例如
#666 48%, #999 52%，给浏览器留出 4% 插值缓冲区
用 HSL 或 OKLCH 中间色替代 RGB 跳变
RGB 是设备相关空间，插值不感知均匀；HSL/LCH 更贴近人眼响应。虽然纯 CSS 不支持 LCH 渐变插值（底层仍是 RGB），但用 HSL 定义中间色能显著降低断层概率，尤其在暗→亮、冷→暖过渡中。
- 黑→白过渡，别用
rgb(0,0,0) → rgb(255,255,255)，改用hsl(0, 0%, 0%) → hsl(0, 0%, 50%) → hsl(0, 0%, 100%) - 红→蓝跳变，中间加
hsl(300, 70%, 50%)（品红）作缓冲，比直接插值hsl(0, ...) → hsl(240, ...)平滑得多 - OKLCH 需 PostCSS 或 JS 生成，但效果最稳；若项目允许，优先用
oklch(0.3 0.15 30)类写法替代 HEX
加轻微噪点或启用合成层绕过 Safari 色带
Safari 在低对比度渐变（如 #f5f5f5 → #ffffff）上默认走 16-bit 渲染路径，硬截断成几十阶灰度，最暗几阶就显出“黑色阴影”——这其实是 banding，不是边缘问题，但视觉上就是两端发灰发黑。
- 对 Safari 必须用伪元素：给容器设
position: relative; background: transparent;，再用::before承载渐变，并加transform: translateZ(0)强制高精度合成层 - 加极低透明度噪点覆盖：
background-image: linear-gradient(...), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='rgba(0,0,0,0.02)'/ %3E%3C/svg%3E") - 禁用
rgba()做透明过渡：写linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0))会让 R/G/B/A 四通道独立插值，叠加白底后中间段必然发灰；应固定底色 + 渐变层叠
最容易被忽略的是：**渲染空间不完整会放大所有边缘问题**。如果 html 没设 height: 100%，body 又只靠 min-height: 100vh，滚动时渐变会被压缩重绘，原本平滑的过渡瞬间变成硬边条纹——这点在移动端尤为明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
