如何让颜色渐变流向盒影？

Question

我试图使用CSS通过使用径向渐变和盒影来创建一些看起来像太阳的东西（尽管颜色很深）。我对结果很满意，只是在圆周和盒影之间有一个小的白色边框，我似乎无法去除；我希望从圆的边缘到阴影之间有一个无痕的过渡。我给一个div加上了以下CSS。

#gradient-circle {

    background: radial-gradient(#545C6F, #3E4452); 
    border: 0;
    height: 25vh;
    width: 25vh;
    border-radius: 50%;
    box-shadow: 0px 0px 3vw 1vw #3E4452;

    }

<div id=gradient-circle />

我试过所有不同的边框类型，我玩过影子的模糊和扩散， 但似乎没有任何东西可以摆脱白色边框。任何帮助将是非常感激的

Answer 1

问题是 border-radius 会在周围产生尖锐的边缘，所以无论该元素后面是什么颜色，都会在里面出血。

相反，我们可以使用背景来产生影子盒效果，而不需要使用 border-radius

div {
  background: radial-gradient(100% 100% at 50% 50%, #545C6F 0, #3E4452 40%, #ffffff00 50%);
  height: 300px;
  width: 300px;
}

<div></div>

Answer 2

A drop-shadow 滤清器可以在这里做得更好

#gradient-circle {
  background: radial-gradient(#545C6F, #3E4452);
  border: 0;
  height: 25vh;
  width: 25vh;
  border-radius: 50%;
  filter:drop-shadow(0px 0px 2vw #3E4452) drop-shadow(0px 0px 3vw #3E4452);
}

<div id=gradient-circle ></div>