最近我收到了越来越多关于糟糕的渐变效果(CSS、Canvas和SVG)的投诉。
由于这高度依赖于浏览器和操作系统,我无法提供全局的 MCVE。因此,我将重点介绍这个在 Chrome/Ubuntu 上糟糕渲染的简单 CSS 渐变(垂直条纹):
body {
background: linear-gradient(90deg, #111, #444);
}
当然,我对这个特定情况的解决方案很感兴趣。但是我更看重一般解决方案,可以获得平滑单调的渐变效果。基于Canvas或图像的解决方案不可接受,因为我的渐变数量众多、动态且通常部分透明。