如何使颜色渐变流入框阴影？答案

【问题标题】：How do I make color gradient flow into box-shadow?如何使颜色渐变流入框阴影？
【发布时间】：2020-08-11 10:09:29
【问题描述】：

我正在尝试使用 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;

    }

&lt;div id=gradient-circle /&gt;

我尝试了所有不同的边框类型，我尝试过阴影模糊和扩散，但似乎没有什么能摆脱白色边框。任何帮助将不胜感激！

【问题讨论】：

"是一个小白边" 您需要提供屏幕截图并提及您使用的浏览器。例如，MS Edge 中没有“小白边”。

标签： css box-shadow radial-gradients

【解决方案1】：

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);
}

&lt;div id=gradient-circle &gt;&lt;/div&gt;

【讨论】：

感谢您的帮助！

【解决方案2】：

问题是border-radius 会在周围产生尖锐的边缘，因此该元素后面的任何颜色都会渗入内部。

我们可以使用背景来产生阴影框效果而不需要border-radius

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

&lt;div&gt;&lt;/div&gt;

【讨论】：