Edge浏览器中radial-gradient无法生效问题排查与解决方案求助

一、渐变失效的直接原因 #

你代码里把径向渐变的函数名拼错了——应该是radial-gradient，但你写成了radical-gradient，浏览器识别不了这个错误的函数名，所以渐变完全没效果。

二、修复后的可用代码 #

修正拼写就行，另外注意给元素设置宽高，不然元素没尺寸的话，渐变也显示不出来：

/* 示例：给全屏容器加渐变背景 */
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-image: radial-gradient(#3A3456, #211E2E);
}

三、贴近预期效果的优化 #

如果想要更接近你目标的那种中心偏亮、向四周自然过渡的渐变，可以细化径向渐变的参数，比如指定中心位置和颜色过渡的范围：

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  /* 以中心为起点，椭圆形状，从亮色调逐步过渡到深色 */
  background-image: radial-gradient(ellipse at center, #3A3456 0%, #211E2E 100%);
}

关于锥形渐变的补充 #

锥形渐变（conic-gradient）是围绕中心做旋转式的颜色过渡，和你要的这种从中心向外扩散的渐变逻辑完全不一样，用它来做这个背景确实费劲，换回径向渐变就能轻松达到预期效果。

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