为何我的多层径向渐变在Safari中仅显示第一个颜色？

你的问题出在径向渐变的颜色停止点设置上，Safari的WebKit引擎对这种写法的解析逻辑和Chrome存在差异：当你把起始色和终止色的位置都设为相同百分比时（比如第一个渐变里的rgb(255, 98, 0) 100%, #FFB81A00 100%），Safari会判定该渐变已完全覆盖元素，直接忽略后续所有渐变层。

只需要把每个渐变的终止色百分比调得比起始色大一点（比如大1%），就能让Safari正确渲染所有渐变层，效果和Chrome保持一致：

background: 
    radial-gradient(5% 10% at 40% 80%, rgb(255, 98, 0) 100%, #FFB81A00 101%),
    radial-gradient(30% 40% at 60% 40%, rgb(255,61,0) 74%, #FF3D0000 75%),
    radial-gradient(30% 70% at 40% 40%, rgb(254,0,255) 94%, #FFB81A00 95%),
    radial-gradient(20% 30% at 60% 40%, rgb(204,0,0) 94%, #FF3D0000 95%),
    radial-gradient(20% 50% at 20% 40%, rgb(37, 0, 89) 74%, #FFB81A00 75%);

原因是Safari要求渐变的颜色停止点必须是递增的位置值，当两个点位置完全相同时，它无法识别渐变的过渡逻辑，进而终止后续层的渲染。把终止色位置设为比起始色大1%，既不会影响视觉效果，又能让Safari正确解析每个渐变层的叠加关系。

内容的提问来源于stack exchange，提问作者Developer