Html 已设置动画的CSS径向渐变具有可见边界

所以我试图在其他HTML控件后面设置一个径向渐变的动画（向上移动表单底部）

HTML正文是红色的将颜色更新为黑色

渐变位于具有以下样式的

div

：

.bg {
overflow: hidden;
position: auto;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 100%);


-webkit-animation-name: animatedBackground;
-webkit-animation-duration: 2.5s;}

所以现在，当渐变移到HTML控件后面时，有一个可见的周长

您可以观察到有一个类似边框的东西（以黄色突出显示）

我试图去掉这个边界，这样梯度看起来就像是一个放射状的东西，可能在边缘上褪色/模糊，在背景中移动

可能吗

我做错什么了吗

添加了小提琴

---

您的位置设置为自动。。。你没有宽度。在自动模式下，您没有高度。更改为绝对以覆盖整个屏幕或为.bg提供实际高度。将其更改为绝对。是一样的。我加了一把小提琴。你可以看一下。看起来差不多吧？最后它应该做什么。。。是否有一个现有的例子？不，它看起来不像我需要的。它的可见边界在上图中以黄色突出显示。